vue路由传参方式 nuxt

vue路由传参常用的三种方式

1、通过params来传递参数（本人常用）传递参数

接收参数

<li v-for="article in articles" @click="getDescribe(article.id)">

getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})

{
path: '/describe/:id',
name: 'Describe',
component: Describe
}

$route.params.id

注意：页面之间的跳转使用query 不然的话刷新页面后会找不到参数

this.$router.push({
path: '/describe',
query: {
id: id
}
})

{
path: '/describe',
name: 'Describe',
component: Describe
}

$route.query.id

$route为当前router跳转对象里面可以获取name、path、query、params等$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法返回上一个history也是使用$router.go方法