天天看點

vue中 路由傳參query和params的差別

1.query傳參,使用query傳參,在定義路由的時候可以不配置參數名稱,

路由跳轉時既可以用path引入也可以用name引入。

query裡的參數會和參數的值拼接在位址欄,跟ajax的get方法類似,傳參可以在位址欄直接看到,安全性不高,

接收參數 this.$route.query.參數

定義路由

vue中 路由傳參query和params的差別

js路由跳轉

vue中 路由傳參query和params的差別

位址欄

vue中 路由傳參query和params的差別

2.1params傳參,在網上看了很多params傳參的文章,說的都不盡相同,最後自己測試了一下,發現得到的結果跟大多數人不同,如有錯誤望大家指出。

首先,**params傳參,**隻能用name引入路由。如果在定義路由的時候不配置路由參數。點選跳轉到新頁面也可以接收到參數(位址欄不會顯示任何參數),但是一重新整理頁面就會失效,

接收參數用this.$route.params.參數

定義路由不配置參數

vue中 路由傳參query和params的差別

引入路由隻能用name

vue中 路由傳參query和params的差別

位址欄(不會顯示任何參數,但是參數傳遞确實成功了,但是重新整理頁面參數就會消失)

vue中 路由傳參query和params的差別

2.2 params傳參時在定義路由時配置參數(正常情況)。路由跳轉後位址欄仍然可以看見參數的值,但是不會将參數和參數的值以字元串的方式拼接在位址欄,僅僅是顯示值并且重新整理後參數不會消失。(這裡我的測試結果與網上大多數的人說法不一緻,如有錯誤,請大佬測試後指出。)

定義路由(需配置參數)。

vue中 路由傳參query和params的差別

路由跳轉(隻能用name)

vue中 路由傳參query和params的差別

位址欄(隻能看到參數的值)

vue中 路由傳參query和params的差別