vue param和query兩種傳參方式

1、傳參方式

　　query傳參方式

this.$router.push({
   path: "/home",
   query: {code:"123"}
})    

　　

　　param傳參方式

this.$router.puth({
   name: "/home",
   param: {code: "123"}  
})

 

// 字符串
<router-link to="apple"> to apple</router-link>
// 對象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由帶查詢參數query，地址欄變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢參數query，地址欄變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由帶路由參數params，params 不生效，如果提供了 path，params 會被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由帶路由參數params，地址欄是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

2、取值

　　獲取query傳參的方式

this.$route.query.code //123

　　獲取param 傳參的方式

this.$route.param.code //123

 

3、瀏覽器的路由展示情況

　　使用query傳參的方式類似於get交互，傳的參數在路由中顯示，可以用作刷新后仍然存在參數。

　　使用param傳參的方式類似於post交互，穿的參數不會出現在路由中，界面刷新后傳參就不存在。

 

注意要點：query與param兩種傳參方式功能一直，都是傳參，方式不一樣，最大區別是傳的參數是否能在路由中顯示，能否刷新后仍然傳參