Vue router-link 两种传参方法及参数的使用

1.路径：http://localhost:8080/#/detail?detail_id=1

<router-link :to="{path:'/detail',query: {detail_id: id}}">跳转</router-link>  (id是参数值)

js中使用获取参数值：

this.$route.query.id

2.路径：http://localhost:8081/#/detail/1

<router-link :to="'/detail/'+id">跳转</router-link>  (id是参数值)

路由配置：

{ 

   path:'/detail/:id',

   name:'Detail',

   component:DetailComponent

}

注意：router-link中链接如果是‘/’开始就是从根路由开始，如果开始不带‘/’，则从当前路由开始

js中使用获取参数值：

 this.$route.params.id //这个id是路由的配置id

扫描二维码关注公众号，回复： 3908117 查看本文章