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