關(guān)于vue-router路由的傳參方式params query
更新時(shí)間：2023年10月08日 08:49:14 作者：Morning_xx
這篇文章主要介紹了關(guān)于vue-router路由的傳參方式params query,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue-router路由的傳參方式params query
1.$router 和 $route的區(qū)別
- $router : 路由操作對(duì)象、操作路由、包括路由的跳轉(zhuǎn)方法，鉤子函數(shù)等、只寫(xiě)對(duì)象;
- $route : 路由信息對(duì)象、獲取路由信息、包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)、只讀對(duì)象;
//操作 路由跳轉(zhuǎn)
this.$router.push({
name:'hello',
params:{
name:'word',
age:'11'
}
})
//讀取 路由參數(shù)接收
this.name = this.$route.params.name;
this.age = this.$route.param.age;2.query傳參
- path配合
- 刷新頁(yè)面參數(shù)不丟失
//query傳參，使用path跳轉(zhuǎn)
this.$router.push({
path:'second',
query:{
queryId:'20230129',
queryName:'Emma'
}
)}
//query傳參接受
this.quertId = ths.$route.query.queryId
this.queryName = this.$route.query.queryName 3.params傳參
- 和name配合
- 刷新頁(yè)面參數(shù)會(huì)丟失
//params傳參，使用name
this.$router.push({
name:'second',
params:{
Id:'20230129',
Name:'Emma'
}
)}
//query傳參接受
this.Id = ths.$route.params.Id
this.Name = this.$route.params.Name
//路由
{
path:'/second/:id/:name',
name:'second',
component:() => import('@/view/second')
}vue-router路由傳參，如果沒(méi)參數(shù)的話就跳轉(zhuǎn)回來(lái)
if (JSON.stringify(this.$route.params) == '{}') {
? ? this.$router.go(-1)
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router next(false) 禁止訪問(wèn)某個(gè)頁(yè)面時(shí),不保留歷史訪問(wèn)記錄問(wèn)題
這篇文章主要介紹了vue-router next(false) 禁止訪問(wèn)某個(gè)頁(yè)面時(shí),不保留歷史訪問(wèn)記錄問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue中el表單的簡(jiǎn)單查詢方法,主要包括表單頁(yè)面根據(jù)groupid 、type 、errortype進(jìn)行數(shù)據(jù)過(guò)濾,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了寫(xiě)一個(gè)Vue Popup組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要為大家介紹了Vue中使用Swiper簡(jiǎn)單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
關(guān)于Vue的 watch、computed和methods的區(qū)別匯總
這篇文章主要介紹關(guān)于Vue的 watch、computed和methods的區(qū)別，下面文章將圍繞Vue的 watch、computed和methods的續(xù)航管資料展開(kāi)全文它們之間區(qū)別的內(nèi)容,需要的朋友可以參考一下，希望能幫助到大家2021-11-11
Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)換膚功能的一種方案分析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題
今天小編就為大家分享一篇解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
今天小編就為大家分享一篇vue首次賦值不觸發(fā)watch的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue前端如何將任意文件轉(zhuǎn)為base64傳給后端
這篇文章主要介紹了vue前端如何將任意文件轉(zhuǎn)為base64傳給后端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04