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 }})

轉自博客：https://www.cnblogs.com/xcdl/p/7411235.html

router-link動態賦值