詳解Vue路由傳參的兩種方式query和params
更新時(shí)間：2022年09月04日 10:36:15 作者：mochenxiya
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
Vue路由傳參的兩種方式query和params
一、router-link
1. 不帶參數(shù)
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name
// 注意：router-link中鏈接如果是'/'開(kāi)始就是從根路由開(kāi)始，如果開(kāi)始不帶'/'，則從當(dāng)前路由開(kāi)始。
2.帶參數(shù)
<router-link :to="{name:'home', params: {id:1}}">
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù))
// 路由可不配置
// html 取參 $route.query.id
// script 取參 this.$route.query.id
二、 this.$router.push()
1. 不帶參數(shù)
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query傳參
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參 $route.query.id
// script 取參 this.$route.query.id
3. params傳參
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
// html 取參 $route.params.id
// script 取參 this.$route.params.id
三、 this.$router.replace() (用法同上,push)
四、query和params區(qū)別與總結(jié)：
- query相當(dāng)于GET請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)
- params相當(dāng)于POST請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示
- query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在
- params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失
到此這篇關(guān)于Vue路由傳參的兩種方式query和params的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問(wèn)題
今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)
這篇文章主要介紹了Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
使用寶塔面板中Nginx部署前端Vue項(xiàng)目完整步驟
在Kubernetes(K8S)部署前端Vue項(xiàng)目通常會(huì)涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個(gè)重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2024-10-10
Vue+Koa+MongoDB從零打造一個(gè)任務(wù)管理系統(tǒng)的詳細(xì)過(guò)程
這篇文章主要介紹了Vue+Koa+MongoDB從零打造一個(gè)任務(wù)管理系統(tǒng),本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時(shí)報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng),是一個(gè)零配置、無(wú)服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫(kù)引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)的相關(guān)資料,需要的朋友可以參考下2024-03-03
隨著Vue3的日益成熟,越來(lái)越多的團(tuán)隊(duì)開(kāi)始考慮將現(xiàn)有Vue2項(xiàng)目升級(jí)到Vue3,作為一次重大版本更新,Vue3在帶來(lái)性能提升和新特性的同時(shí),也引入了一些不兼容的變化,本文將全面解析Vue2到Vue3升級(jí)過(guò)程中需要注意的關(guān)鍵點(diǎn),幫助你順利完成遷移,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過(guò)程
這篇文章主要介紹了Vue3的路由守衛(wèi)以及登錄狀態(tài)儲(chǔ)存過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue-router優(yōu)化import引入過(guò)多導(dǎo)致index文件臃腫問(wèn)題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過(guò)多導(dǎo)致index文件臃腫問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08