vue-router中 query傳參和params傳參的使用和區(qū)別講解
時(shí)隔一年，發(fā)現(xiàn)自己回來看自己寫的文檔都看得云里霧里，這次我在重新改善下這篇文章，希望這篇文章能給大家一些幫助
-2019/12/26
1.query傳參：
1.query傳參
路由：
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ name:'register',path: '/register', component: register }
]
})導(dǎo)航：
// 注意：這是 query 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過去 一種是傳描述目標(biāo)位置的對(duì)象
<router-link to="/login?id=10&name=zs">登錄</router-link>
<router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注冊(cè)</router-link>
或
<router-link :to="{name:'register',query:{id:5,name:'lili'}}">注冊(cè)</router-link>
等同于：
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})注意：jquery可以通過name或path來引入路由
2.params傳參
2.params傳參
路由：
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },// 這里不傳入對(duì)應(yīng)的參數(shù)（:/id/:name） 刷新頁面 參數(shù)會(huì)消失,頁面中就丟失了數(shù)據(jù)
{ name:'register', path: '/register/:id/:name', component: register }
]
})導(dǎo)航：
// 注意：這是 params 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過去 一種是傳描述目標(biāo)位置的對(duì)象
<router-link to="/login/12/ls">登錄</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注冊(cè)</router-link>
等同于：
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})注意：params只能通過name來引入路由，path會(huì)undefined
jquery傳參和params傳參的區(qū)別
1.用法上:
- 上文已經(jīng)提到query可以用name或path來引入
- params必需要用name來引入，接收參數(shù)都是類似的，分別是:
this.$route.query.name和this.$route.params.name。
2.地址欄表現(xiàn)形式上:
query：
params：
注意：這里的12和ls 對(duì)應(yīng)的是/:id/:name 這兩個(gè)參數(shù)可以不寫 那么就不會(huì)在地址欄上顯示 不過刷新頁面參數(shù)會(huì)消失 寫上參數(shù)刷新頁面 參數(shù)不會(huì)消失
到此這篇關(guān)于vue-router中 query傳參和params傳參的使用和區(qū)別的文章就介紹到這了,更多相關(guān)vue-router query和params傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問題標(biāo)注，畫圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07
Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價(jià)格代碼實(shí)例
這篇文章主要介紹了Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價(jià)格實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue 應(yīng)用在首屏加載時(shí)速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請(qǐng)求過多、資源加載過慢,針對(duì)這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分離極速后臺(tái)開發(fā)框架, 本文主要介紹了idea部署RuoYi-Vue分離版的圖文詳解,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
在Vue3.5版本中最大的改動(dòng)就是響應(yīng)式重構(gòu),重構(gòu)后性能竟然炸裂的提升了56%,本文我們來講講使用雙向鏈表后,Vue內(nèi)部是如何實(shí)現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下2024-11-11
本文主要介紹了vue中el-message的封裝使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
前端報(bào)錯(cuò)npm ERR! cb() never called!問題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下2024-05-05
本篇文章主要介紹了詳解Vue中一種簡易路由傳參辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡介
這篇文章主要介紹了Vue3中的三種函數(shù)，分別對(duì)reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡單介紹，有需要的朋友可以借鑒參考下2021-09-09