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