Vue Router的params和query傳參的使用和區別

vue頁面跳轉有兩種方式分別是：name和path

this.$router.push({name: 'HelloWorld2})

this.$router.push({path: '/hello-world1'})

 

傳參也有兩種方式分別是：params和query

this.$router.push({name: 'HelloWorld2', params:{id:1}})

this.$router.push({path: '/hello-world2', query:{id:2}})

下面放張圖來展示路徑和參數之間的關系

結論： 

使用name跳轉可以用params和query傳參

當name和query對應的時候也可以跳轉並傳參,但是路由后面不能加參數名，否則頁面會變空白

使用path跳轉只能用query傳參

如果使用path對應params則數據傳輸不過去

使用query傳參地址欄用?拼接起來的，類似於Ajax中的get請求

{
path: '/hello-world',
name: 'HelloWorld2',
component: HelloWorld2
}

 這是使用query傳參的地址欄顯示：hello-world?id=2

使用params傳參的時候要在路由后面加參數名，（如果不加參數名也可以傳遞參數，但是頁面一刷新參數就丟失了），並且傳參的時候，參數名要跟路由后面設置的參數名對應。使用query方法，就沒有這種限制，直接在跳轉里面用就可以

{
path: '/hello-world/:id',
name: 'HelloWorld2',
component: HelloWorld2
}

這是使用params傳參的地址欄顯示：hello-world/2 

講了傳參怎么接受參數呢？ 

params和query接受參數很類似

this.$route.params.id,
this.$route.query.id,

 這里注意使用的是route不是router！

再來補充下使用

<router-link>對應path和name怎么傳參
先來看index.js的寫法

{
path: '/my-order/:state',
name: 'my-order',
component: MyOrder,
}

path傳參：

<router-link:to="{path: '/select-address/0'}"></router-link>
看見了吧，直接在跳轉的時候在地址欄拼接上對應的參數即可，

name傳參：

<router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
使用name傳參的時候就不能在地址欄進行拼接操作，需要寫出對應的參數名

接受參數跟上面的都一樣