router-link动态赋值

 

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;

 

 

 

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

转载于:https://www.cnblogs.com/gluncle/p/9907509.html