Vue音乐--排行榜页面04_详情页面路由

大概步骤：

目标效果

---

四、配置排行榜详情页面路由

# router-->index.js 配置子路由

{
      path: '/rank',
      name: 'Rank',
      component: Rank,
      children:[{	//配置动态子路由
        path: '/rank/:id',
        name: 'RankDetail',
        component: RankDetail,
      }]
    },

# rank.vue

<div>
	<!--排行榜首页-->
	<scroll>
		<ul><li @click="selectRank(item)"></li></ul>
	</scroll>
	<!--详情页路由-->
	<router-view />
</div>

# rank.vue  点击li触发跳转路由事件

selectRank(item){
	this.$router.push({
		path:`/rank/${item.id}`	//push一个对象，写path路径
	})

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]