溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue2中,根據(jù)list的id進入對應的詳情頁并修改title方法

發(fā)布時間：2020-09-11 07:01:13 來源：腳本之家 閱讀：230 作者：趙海辛 欄目：web開發(fā)

一般項目中，我們會遇到有個list。。。然后你隨便點擊一個，會進入他對應的詳情頁。。。正常，那個詳情頁是一個公共的組件，我們只需根據(jù)id傳值來判斷，這個頁面顯示的是哪個list的數(shù)據(jù)即可。如圖：點擊電影進入電影詳情……以此類推

vue2中,根據(jù)list的id進入對應的詳情頁并修改title方法

vue2中,根據(jù)list的id進入對應的詳情頁并修改title方法

具體代碼如下：

（有人會奇怪，我為什么不循環(huán)……這個是根據(jù)項目需求而定的，這個相當于入口，而進入里面分別對應的還是多個list，并且后臺給的圖片的url也不一樣，我懶得v-if去寫了，so，這三個我就用了通過了路由id過去。當然，后面有循環(huán)list。。兩種不同的方式，大家根據(jù)自己的項目來選擇就好微笑）

<template>
 <section class="club">
 <section class="img2_cont">
  <router-link to="/club/itemList/0">
  <section>
   <img :src="getContextPathSrc+movie_url">
   <p>電影 • 紀錄片</p>
  </section>
  </router-link>
  <router-link to="/club/itemList/1">
  <section>
   <img :src="getContextPathSrc+music_url">
   <p>室內(nèi)樂 • 下午茶</p>
  </section>
  </router-link>
  <router-link to="/club/itemList/2">
  <section>
   <img :src="getContextPathSrc+sport_url">
   <p>沙龍 • 講談</p>
  </section>
  </router-link>
 </section>
 </section>
</template>
<script>
 import api from './../fetch/api';
 import { mapGetters } from 'vuex';
 export default {
 name: 'club',
 data () {
  return {
  backMsg: {},
  movie_url: '',
  music_url: '',
  sport_url: '',
  }
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ])
 },
 created() {
 api.commonApi('后臺接口url','params')
  .then(res => {
  this.backMsg = res.data;
 // 電影圖片
 this.movie_url = res.data.IMG_LIST[0].IMG_URL;
 // 室內(nèi)樂
 this.music_url = res.data.IMG_LIST[1].IMG_URL;
 // 體育圖片
 this.sport_url = res.data.IMG_LIST[2].IMG_URL;
 })
 },
 }
</script>

而路由index.js里面需要如下寫：

{
 path: 'itemList/:id',
 name: 'itemList',
 component: resolve => require(['components/club/itemList.vue'], resolve)
},

這樣就完成了初步的列表進入對應的頁面。有人會發(fā)現(xiàn)， 看我的截圖，明顯是有左右滑動的，這里是我把代碼刪掉了，因為那個不是我今天要鞏固的= =。接下來，就是在對應頁面是N個列表list，我們需要點擊每個進入他所對應的詳情頁，而我也是用循環(huán)寫的list（就是上面的第二張圖片，推薦下的list太多了，不循環(huán)會死人的偷笑），具體代碼如下：

<template>
 <div class="page-loadmore">
 <section class="Ctab">
  <p :class="{tActive:tActive}" @click="toRecommend()">推薦</p>
  <p :class="{lActive:lActive}" @click="toClassic()">經(jīng)典</p>
 </section>
 <!-- 下拉加載更多產(chǎn)品列表 -->
 <load-more
  :bottom-method="loadBottom"
  :bottom-all-loaded="allLoaded"
  :bottomPullText='bottomText'
  :auto-fill="false"
  @bottom-status-change="handleBottomChange"
  ref="loadmore">
  <ul class="page-loadmore-list">
  <li v-for="(item,key) in backMsg" class="page-loadmore-listitem">
   <movie-type :item="item"></movie-type>
  </li>
  </ul>
  <div v-if="loading" slot="bottom" class="loading">
  <img src="./../../assets/main/uploading.gif">
  </div>
 </load-more>
 </div>
</template>
<script type="text/babel">
 import api from './../../fetch/api';
 import { mapGetters } from 'vuex';
 import LoadMore from './../common/loadmore.vue';
 import MovieType from './movieType.vue';
 export default {
 props:{
  TYPE: Number,
  backMsg: Array,
  dataType: String,
  loading: Boolean,
  allLoaded: Boolean,
  pageNo: Number,
 },
 data() {
  return {
  tActive: true,
  lActive: false,
  status: '',
  bottomText: '上拉加載更多...',
  };
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ]),
 },
 components: {
  LoadMore,
  MovieType
 },
 methods: {
  // 點擊推薦按鈕
  toRecommend: function() {
  this.tActive = true;
  this.lActive = false;
  this.$emit('toRecommend', {dataType: this.dataType, TYPE: this.TYPE});
  },
  // 點擊經(jīng)典按鈕
  toClassic: function() {
  this.tActive = false;
  this.lActive = true;
  this.$emit('toClassic', {dataType: this.dataType, TYPE: this.TYPE});
  },
  // 加載更多的方法
  loadBottom: function() {
  alert(1)
  this.$emit('loadBottom', {dataType: this.dataType, TYPE: this.TYPE});
  },
  handleBottomChange(status) {
  this.bottomStatus = status;
  },
 },
 };
</script>

這里我把循環(huán)出的列表寫了個單獨的組件。movieType組件內(nèi)容如下：

<template>
 <div class="page-loadmore">
 <router-link :to="'/club/itemDetail/'+item.ID">
  <section>
  <img :src="getContextPathSrc+item.IMG_URL" class="Pimg">
  <section>
   <h4>{{item.NAME}}</h4>
   <aside>
   <img src="../../assets/club/city.png">
   <span>{{item.CITY}}</span>
   </aside>
   <aside>
   <img src="../../assets/club/time.png">
   <span>{{item.START_DATE | movieTime}}-{{item.END_DATE | movieTime}}</span>
   </aside>
  </section>
  </section>
 </router-link>
 </div>
</template>
<script>
 import api from './../../fetch/api';
 import { mapGetters } from 'vuex';
 import LoadMore from './../common/loadmore.vue';
 export default {
 props:{
  item: Object,
 },
 data() {
  return {
  };
 },
 computed: {
  ...mapGetters([
  'getContextPathSrc',
  'sessionId',
  'token'
  ]),
 },
 };
</script>

當然，最重要的一步不能忘掉。。。我們需要修改路由index.js文件：

{
 path: 'itemDetail/:ID',
 name: 'itemDetail',
 component: resolve => require(['components/club/itemDetail.vue'], resolve)
},

這樣就大功告成了。兩種方法，喜歡哪種用哪種就好。。

以上這篇vue2中,根據(jù)list的id進入對應的詳情頁并修改title方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手