在一般项目中，我们会遇到一个列表。然后你可以点击任何一个，你就会进入它对应的详细页面。正常情况下，详细页面是一个公共组件，所以我们只需要根据id值来判断这个页面显示的是哪个列表数据。如图：点击电影进入电影详情.等等

具体代码如下：

(有些人可能会奇怪我为什么不骑车.这个是根据项目要求确定的，这个相当于入口，入口对应的列表还是有好几个的，背景中给出的图片的URL也不一样，所以就懒得用v-if写了，所以就用了三个，传递了路由id。当然，有一个循环列表。两种不同的方式，每个人都可以根据自己的项目进行选择，只需微笑即可)

模板部分class='club '部分class=' img 2 _ cont ' router-link to='/club/item list/0 '部分img : src=' http : getcontextpathsrc movie _ URL ' pfilm document/p/Section/router-link router-link to='/club/item list/1 '部分img : src=' http 3: getcontextpathsrc _ URL ' p chamber music下午茶/p/Section/router-router/./fetch/API '；从“vuex”导入{ MapGetters }；导出默认{ name: 'club '，data(){ return { backmsg : } }，movie_url: ' '，music_url: ' '，sport_url: ' '，} }，Computed: <.mapgetter([' getcontextpathsrc '，' sessionid '，' token'])}，created () {api.commonapi('后台接口URL '，' params ')。然后(RES={ this . back msg=RES . data；//电影图片this . movie _ URL=RES . data . img _ list[0]。img _ URL//室内乐这个。music _ URL=res.data.img _ list [1]。img _ URL//体育图片这个。sport _ URL=res.data.img _ list [2]。img _ URL}) }，}/脚本和route index.js需要编写如下：

{path:' itemlist/: id '，name:' itemlist '，component : resolve=require([' components/club/item list。vue']，resolve)}，从而完成初始列表进入相应页面。有人会发现，看我的截图，明显有左右滑动。这里我删除了代码，因为这不是我今天要巩固的。接下来，在相应的页面上有n个列表。我们需要点击每一个进入它对应的详情页，我也是循环写列表(也就是上面第二张图，推荐的列表太多了，不循环的人会笑)。具体代码如下：

模板div class=' page-load more '节class=' Ctab ' p : class=' { Tactive3360 active } ' @ click=' TOre荐()'推荐/p p : class=' { Lactive3360 active } ' @ click=' to classic()'经典/p /section！-下拉加载更多产品列表-load-more : bottom-method=' load bottom ' : bottom-all-loaded=' all loaded ' : bottom pulltext=' bottom text ' : auto-fill=' false ' @ bottom-status-change=' handlebottom change ' ref=' load more ' ul class=' page-load more-list ' Li v-for='(item，key)在backMsg ' class=' page-load more-list item ' movie-type : item=' item '/中/././资产/主/上传。gif '/div/load-more/div/template脚本类型=' text/babel '导入API from ' ./././fetch/API '；从“vuex”导入{ MapGetters }；从""导入加载更多。/./common/load更多。vue '；从""导入电影类型/movietnetype。vue '；导出默认{ props: { TYPE: Number，backMsg: Array，dataType: String，Loaded: Boolean，allLoaded: Boolean，pageNo: Number，}，data() { return { tActive: true，lActive: false，status: ' '，bottomText: '上拉加载更多.', };}，computed: {.mapgetter([' getContextPathSrc '，' sessionId '，' token' ])，}，components: { LoadMore，MovieType }，methods: { //点击推荐按钮推荐：函数(){ this . Tactive=true this . Lactive=false这个$emit('toRecommend '，{dataType: this.dataType，Type: this .TYPE })；}, //点击经典按钮toClassic:函数(){ this . Tactive=false this . Lactive=true这个$emit('toClassic '，{dataType: this.dataType，Type: this .TYPE })；}, //加载更多的方法loadBottom:函数(){警报(1)这个$emit('loadBottom '，{dataType: this.dataType，Type: this .TYPE })；}，handleBottomChange(状态){ this。bottomstatus=状态；}, }, };/script这里我把循环出的列表写了个单独的组件电影类型组件内容如下：

模板div class='页面-加载更多'路由器-链接：到=' '/club/ItemDetail/' item .ID ' section img : src=' http : getcontextpathsrc项IMG网址='皮姆'部分H3 { { item } .名称}}/h3一旁img src='http:/./资产/俱乐部/城市。png ' span { { item } .城市} }/span/一旁img src='http:/./资产/俱乐部/时间。png ' span { { item } .START_DATE | movieTime}}-{{item .END _ DATE | MOVietime } }/span/side/section/section/router-link/div/模板脚本从'导入api ./././fetch/API '；从“vuex”导入{ MapGetters }；从""导入加载更多。/./common/load更多。vue '；导出默认{ props: { item: Object，}，data(){ return }；}，computed: {.mapgetter([' getContextPathSrc '，' sessionId '，' token' ])，}，}；/script当然，最重要的一步不能忘掉。我们需要修改路由index.js文件：

{ path: 'itemDetail/:ID '，name: 'itemDetail '，组件： resolve=require([' components/club/item detail。vue ']，resolve)}，这样就大功告成了。两种方法，喜欢哪种用哪种就好。

以上这篇vue2中，根据目录的编号进入对应的详情页并修改标题方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。