vue路由傳參方式可以劃分為params傳參、query傳參和url字串拼接,首先需要知道路由跳轉並傳參的方式(宣告式導航和程式設計式導航)以及接收路由引數的方法

一、路由跳轉並傳參的方法

1、宣告式導航

不帶參跳轉 對應的地址為/foo

<router-link to="/foo">Go to Foo</router-link>

url字串拼接傳參 對應的地址為/foo?id=123

<router-link :to="{path:'/foo?id=123'}">Go to Foo</router-link>
 

query方式物件形式傳參 對應的地址為/foo?id=123

<router-link :to="{path:'/foo',query:{id:123}}">Go to Foo</router-link>

params方式物件形式傳參 對應地址為 /path/123 , 注意params和query一起使用params會失效，params與name一起使用

<router-link :to="{name:'/foo',params:{id:123}}">Go to Foo</router-link>

2、程式設計式導航(路由例項物件router=new VueRouter())

字串

router.push('home')

物件

router.push({ path: 'home' })

命名的路由 對應路徑為/path/123

router.push({ name: 'user', params: { userId: '123' }})

帶查詢引數，變成 /register?plan=123

router.push({ path: 'register', query: { plan: '123' }})

二、接收路由引數的方法，分 ? 和 : 兩種接收方式

$route是路由資訊物件

1、?形式的引數使用this.$route.query接收引數，結果是一個物件

2、:形式的引數使用this.$route.params接收引數，結果也是一個物件