vue-router2路由传参的几种方式 - 简书

简单介绍一下vue-router传参的几种，深入学习请移步 vue-router2中文文档

声明式

<router-link :to="{path:'newsDetail/'+id}"><router-link>

<router-link :to="{name:'newsDetail',params:{id:123}}"><router-link>

//也可以使用以下方式：
<router-link v-bind="{to:'/newsDetail/'+id}"><router-link>

编程式

router.push({ name: 'newsDetail', params: { id: 123 }})  ->/newsDetail/123

router.push({ path: 'newsDetail', query: { id: 123 }}) ->newsDetail?id=123

// 注意这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

//别忘了路由里配置
{ path: '/newsDetail/:id', name:'newsDetail',component: newsDetail}

• 以params的方式在路由之间传递参数，参数可以从this.$route.params中获取，以query的方式在路由之间传递参数，参数可以从this.$route.query中获取。