Vue-route跳转动态传参的多种方式

关于vue-route跳转是比较丰富,并且也是比较好用的,也有很多方式:

1.比较直观的,声明式传参

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

获取:this.$route.params.id

2.push跳转及传参

//路由定义的name,只跳转,不传参
this.$router.push('home')

//对象形式,路由定义的path,只跳转,不传参
this.$router.push({ path: 'home' })

//路由定义的名字和携带的参数,注意:参数一定要加{},否则获取不到
this.$router.push({ name: 'user', params: { userId: '123' }})
获取:this.$route.params

//路由定义的路径和查询携带的参数
this.$router.push({ path: 'register', query: { plan: 'private' }})