Vue router 如何傳參
params、query 是什么？
params：/router1/:id，這里的 id 叫做 params。例如/router1/123, /router1/789
query：/router1?id=123，這里的 id 叫做 query。例如/router1?id=456
query 方式傳參和接收參數(shù)
傳參: this.$router.push({ path:"/xxx" query:{ id:id } }) this.$router.push 傳參時(shí), 并不會(huì)引起頁(yè)面刷新。需要重新請(qǐng)求數(shù)據(jù)，代碼如下。
<div>shopName:{{shop.shopName}}</div>
export default{
data(){
return {
shop:{shopName:"shopName"},
shopNo:"123"
};
},
mounted(){
// 初始時(shí)加載店鋪數(shù)據(jù)
this.loadShop();
},
watch:{
// shopNo改變時(shí)重新加載
shopNo:function(newShopNo){
this.loadShop();
}
},
methods:{
loadShop(){
// 調(diào)用API獲取shop數(shù)據(jù)
var shop = {/*獲取到的數(shù)據(jù)*/};
this.shop=shop;
}
}
}
接收參數(shù): this.$route.query.id
params 方式傳參和接收參數(shù)
params 傳參 路由界面： router.js: 路由設(shè)置這里，當(dāng)你使用 params 方法傳參的時(shí)候，要在路由后面加參數(shù)名，并且傳參的時(shí)候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對(duì)應(yīng)。使用 query 方法，就沒(méi)有這種限制，直接在跳轉(zhuǎn)里面用就可以
傳參: this.$router.push({ name:"xxx" params:{ id:id } })
接收參數(shù): this.$route.params.id
注意：如果路由上面不寫(xiě)參數(shù)，也是可以傳過(guò)去的，但不會(huì)在 url 上面顯示出你的參數(shù)，并且當(dāng)你跳到別的頁(yè)面或者刷新頁(yè)面的時(shí)候參數(shù)會(huì)丟失（如下圖所示），那依賴(lài)這個(gè)參數(shù)的 http 請(qǐng)求或者其他操作就會(huì)失敗。
query 傳參和 params 傳參的區(qū)別
用法上的： query 要用 path 來(lái)引入，params 要用 name 來(lái)引入，接收參數(shù)都是類(lèi)似的，分別是 this.$route.query.name 和 this.$route.params.name。注意接收參數(shù)的時(shí)候，已經(jīng)是$route 而不是$router 了哦！！
展示上的： query 更加類(lèi)似于我們 ajax 中 get 傳參，params 則類(lèi)似于 post，說(shuō)的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示所以?xún)烧卟荒芡瑫r(shí)使用！！！
router-link 和編程式導(dǎo)航兩種跳轉(zhuǎn)方式
通過(guò) router-link 我們可以向路由到的組件傳遞參數(shù)，這在我們實(shí)際使用中時(shí)非常重要的。
編程式導(dǎo)航
router.push
router.replace 和 router.push()不同，使用 router.replace()會(huì)將一個(gè)訪問(wèn)記錄 push 到 url 中，所以再退回了的時(shí)候一定會(huì)回到這里，而 router.replace()不是添加一個(gè)新的進(jìn)入，而是替換棧頂元素，這樣，在返回的時(shí)候，就會(huì)返回到棧頂元素的下面一個(gè)。
router.go
在瀏覽器記錄中前進(jìn)一步，等同于 history.forward() router.go(1)
后退一步記錄，等同于 history.back() router.go(-1)
動(dòng)態(tài)傳參之坑
注意:params 傳參，push 里面只能是 name:"xxxx",不能是 path:"/xxx",因?yàn)?params 只能用 name 來(lái)引入路由，如果這里寫(xiě)成了 path，接收參數(shù)頁(yè)面會(huì)是 undefined！！！
補(bǔ)充知識(shí)：vue三種動(dòng)態(tài)傳參的方式
如下場(chǎng)景：
<el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" @click="goList(scope.row.id)">個(gè)人信息表</el-button> </template> </el-table-column>
.直接占位符的方式
goList(id){
this.$router.push({path:`/line/${id}`})
}
需要對(duì)應(yīng)路由配置如下：
{
path:"/line/:id",
name:"line",
component:line
}
二、通過(guò)路由屬性中的name來(lái)確定匹配的路由，通過(guò)params來(lái)傳遞參數(shù)
goList(id){
this.$router.push({ name:"line",params:{ orderId:id }})
}
對(duì)應(yīng)路由配置如下：
{
path:"/line",
name:"line",
component:line
}
三、通過(guò) path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(shù)，傳遞的參數(shù)會(huì)暴露在地址欄中
goList(id){
this.$router.push({ path: "/line",query: { orderId:id }})
}
對(duì)應(yīng)路由配置同二
以上這篇vue 中的動(dòng)態(tài)傳參和query傳參操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/u014628388/article/details/81085624
