vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁并修改title方法
更新時(shí)間：2018年08月24日 14:36:41 作者：趙海辛
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁并修改title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
一般項(xiàng)目中，我們會(huì)遇到有個(gè)list。。。然后你隨便點(diǎn)擊一個(gè)，會(huì)進(jìn)入他對(duì)應(yīng)的詳情頁。。。正常，那個(gè)詳情頁是一個(gè)公共的組件，我們只需根據(jù)id傳值來判斷，這個(gè)頁面顯示的是哪個(gè)list的數(shù)據(jù)即可。如圖：點(diǎn)擊電影進(jìn)入電影詳情……以此類推
具體代碼如下：
（有人會(huì)奇怪，我為什么不循環(huán)……這個(gè)是根據(jù)項(xiàng)目需求而定的，這個(gè)相當(dāng)于入口，而進(jìn)入里面分別對(duì)應(yīng)的還是多個(gè)list，并且后臺(tái)給的圖片的url也不一樣，我懶得v-if去寫了，so，這三個(gè)我就用了通過了路由id過去。當(dāng)然，后面有循環(huán)list。。兩種不同的方式，大家根據(jù)自己的項(xiàng)目來選擇就好微笑）
<template>
<section class="club">
<section class="img2_cont">
<router-link to="/club/itemList/0">
<section>
<img :src="getContextPathSrc+movie_url">
<p>電影 • 紀(jì)錄片</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('后臺(tái)接口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)
},
這樣就完成了初步的列表進(jìn)入對(duì)應(yīng)的頁面。有人會(huì)發(fā)現(xiàn)， 看我的截圖，明顯是有左右滑動(dòng)的，這里是我把代碼刪掉了，因?yàn)槟莻€(gè)不是我今天要鞏固的= =。接下來，就是在對(duì)應(yīng)頁面是N個(gè)列表list，我們需要點(diǎn)擊每個(gè)進(jìn)入他所對(duì)應(yīng)的詳情頁，而我也是用循環(huán)寫的list（就是上面的第二張圖片，推薦下的list太多了，不循環(huán)會(huì)死人的偷笑），具體代碼如下：
<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: {
// 點(diǎn)擊推薦按鈕
toRecommend: function() {
this.tActive = true;
this.lActive = false;
this.$emit('toRecommend', {dataType: this.dataType, TYPE: this.TYPE});
},
// 點(diǎn)擊經(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)出的列表寫了個(gè)單獨(dú)的組件。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>
<h3>{{item.NAME}}</h3>
<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>
當(dāng)然，最重要的一步不能忘掉。。。我們需要修改路由index.js文件：
{
path: 'itemDetail/:ID',
name: 'itemDetail',
component: resolve => require(['components/club/itemDetail.vue'], resolve)
},
這樣就大功告成了。兩種方法，喜歡哪種用哪種就好。。
以上這篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁并修改title方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
vue3中unplugin-auto-import自動(dòng)引入示例代碼
unplugin-auto-import 這個(gè)插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動(dòng)引入的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
當(dāng)頁面刷新時(shí),Vuex?的?state?數(shù)據(jù)會(huì)丟失,這是因?yàn)?Vuex?的狀態(tài)存儲(chǔ)在內(nèi)存中,刷新瀏覽器會(huì)重置?JavaScript?的運(yùn)行環(huán)境,下面我將詳細(xì)介紹幾種解決方案,從簡(jiǎn)單到復(fù)雜,幫助你根據(jù)項(xiàng)目需求選擇最適合的方法,需要的朋友可以參考下2025-04-04
因?yàn)関ue的響應(yīng)式是通過 Object.defineProperty 來實(shí)現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10
vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作
這篇文章主要介紹了vue移動(dòng)端彈起蒙層滑動(dòng)禁止底部滑動(dòng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue的編碼技巧與規(guī)范使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新
本篇文章主要介紹了詳解Vue 普通對(duì)象數(shù)據(jù)更新與 file 對(duì)象數(shù)據(jù)更新 ，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04