記得初學(xué)Vue的時(shí)候，不知道如何通過(guò)路由跳轉(zhuǎn)界面并傳參，去面試也有問(wèn)到，當(dāng)時(shí)就很尷尬，這么基礎(chǔ)的東西說(shuō)出來(lái)不知道，沒(méi)用過(guò)，真的好難堪，誰(shuí)也不是一開(kāi)始就什么都會(huì)，不懂得及時(shí)去查，時(shí)間長(zhǎng)了總會(huì)理解，孰能生巧，這不最近在我工作中常常有跳轉(zhuǎn)頁(yè)面的需求，下面我跟大家說(shuō)說(shuō)params和query兩種方式的區(qū)別
首先來(lái)說(shuō)明一下
route得區(qū)別
// $router：是路由操作對(duì)象，只寫對(duì)象
// $route：是路由信息對(duì)象，只讀對(duì)象
// 操作 路由跳轉(zhuǎn) index.vue
this.$router.push({
name:'hello',
params:{
name:'yuyu',
age:'11'
}
})
// 讀取 路由參數(shù)接收 detail.vue
this.name = this.$route.params.name;
this.age = this.$route.params.age;
1、query使用path和name傳參跳轉(zhuǎn)都可以，而params只能使用name傳參跳轉(zhuǎn)。
query傳參：
//query傳參，使用name跳轉(zhuǎn) index.vue
this.$router.push({
name:'contact',
query:{
id:id,
code:code
}
})
//query傳參，使用path跳轉(zhuǎn) index.vue
this.$router.push({
path:'contact',
query:{
id:id,
code:code
}
})
//query接受參數(shù) detail.vue
this.id = this.$route.query.id;
this.code = this.$route.query.code;
params傳參：
// params 傳參 使用name
this.$router.push({
name:'contact',
params:{
id:id,
code:code
}
})
// params接收參數(shù)
this.id = this.$route.params.id;
this.code = this.$route.params.code
//路由
{
path: '/contact/:id/:code',
name:'contact',
component: () => import('@/views/contact'), // 懶加載
}
需要注意的是：
1、params是路由的一部分,必須要在路由后面添加參數(shù)名。query是拼接在url后面的參數(shù)，沒(méi)有也沒(méi)關(guān)系。
2、params一旦設(shè)置在路由，params就是路由的一部分，如果這個(gè)路由有params傳參，但是在跳轉(zhuǎn)的時(shí)候沒(méi)有傳這個(gè)參數(shù)，會(huì)導(dǎo)致跳轉(zhuǎn)失敗或者頁(yè)面會(huì)沒(méi)有內(nèi)容。
如果路由后面沒(méi)有 /:id/:name效果如下圖，地址欄沒(méi)有參數(shù)
**但是如果你刷新一下，就會(huì)發(fā)現(xiàn)頁(yè)面失敗，此時(shí)我們就可以 路由解耦
得方式來(lái)解決，具體得操作請(qǐng)看：http://www.itdecent.cn/p/9583a3b56475
**
