A:router路由配置
export default new Router({ routes: [ { path: '/home', name: 'Home', component: Home, children:[ {path:'home1',component:Home1}, {path:'home2',component:Home2}, {path:'home3',component:Home3}, {path:'home4',component:Home4}, ], },{ path: '/detail', name: 'detail', component:Detail },{ path:'/',redirect:'/home/home1' } ], linkActiveClass:'ac' })
B.template內部
<li v-for="data in tuijiaList.playlists"> <router-link :to="{path:'/detail',query:{id:data.id}}" > <span>{{data.playCount}}</span><i><img :src="data.coverImgUrl"></i> <p>{{data.name}}</p> </router-link> </li>
C:在detail頁面上怎么得到id 值?
this.$route.query.id;
在vue中怎么動態變換router-link中to的值
比如有這么個router需要跳轉
const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })
你的router-link可以這么寫
<router-link :to="{ name: 'user', params: { userId: 123 }}">User </router-link>還可以用編程在代碼里寫，效果也一樣：
router.push({ name: 'user', params: { userId: 123 }})
click 傳值
productDet(inde) {
this.$router.push({
path: "/addsEdit",
name: "addsEdit",
params: {
indexs: inde
}
});
},
接收
this.indexs= this.$route.params.indexs;