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' }})