vue路由傳參 router-link和編程式傳參方式
更新時(shí)間：2023年05月25日 09:00:05 作者：這個(gè)網(wǎng)名好記
這篇文章主要介紹了vue路由傳參 router-link和編程式傳參方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue路由傳參 router-link和編程式傳參
//路由中配置了如下對象：
let options= {
routes:[
{
path:'/insertquery',
name:'query1',
component:()=>import('@/pages/insertquery')
},
{
path:'/insertparams1/:id/:name',
name:'params1',
component:()=>import('@/pages/insertparams1')
},
{
path:'/',
component:()=>import('@/pages/home')
}
]
}vue中query傳遞參數(shù)
query傳參更像是原生中的get方式傳參，參數(shù)會(huì)在url中以?id=xxx&name=xxx的形式存在。刷新不丟失。
傳遞時(shí)，分為以下幾種形式。我們往 path:'/insertquery’中組件中傳參：
<template>
<div style="display: flex;flex-direction:column">
<router-link :to=" '/insertquery?id='+dataId+'&name='+dataName">query傳參</router-link>
<router-link :to="`/insertquery?id=${dataId}&name=${dataName}`">query傳參</router-link>
<!--可以使用路由中的name和path中的任意一種-->
<router-link :to="{path:'/insertquery',query:{id:dataId,name:dataName} }">query傳參</router-link>
<router-link :to="{name:'query1',query:{id:dataId,name:dataName} }">query傳參</router-link>
<button @click="queryBtn1">query傳參</button>
<button @click="queryBtn2">query傳參</button>
</div>
</template>
<script>
export default {
name: "home",
data(){
return {
dataId:222,
dataName:'張三'
}
},
methods:{
queryBtn1(){
this.$router.push({
name:'query1',
query:{id:'22',name:this.dataName}
})
},
queryBtn2(){
this.$router.push({
path:'/insertquery',
query:{id:this.dataId,name:this.dataName}
})
}
}
}
</script>
<style scoped>
</style>接收參數(shù) ：this.$route.query.變量名
再說params傳參 （對象寫法下只能使用路由中的name）
<template>
<div style="display: flex;flex-direction:column">
<router-link :to=" '/insertparams1/'+dataId+'/'+dataName">params傳參</router-link>
<router-link :to="`/insertparams1/${dataId}/${dataName}`">params傳參</router-link>
<router-link :to="{name:'params1',params:{id:dataId,name:dataName} }">params往動(dòng)態(tài)路由中傳遞，刷新參數(shù)不丟失</router-link>
<button @click="paramsBtn1">params往動(dòng)態(tài)路由中傳遞,刷新參數(shù)不丟失</button>
<!--注意：對象的形式中只能路由中的name跳轉(zhuǎn)，往普通路由跳轉(zhuǎn)，刷新后參數(shù)會(huì)丟失（對象形式下，params參數(shù)不在url中）-->
<router-link :to="{name:'query1',params:{id:dataId,name:dataName} }">params往普通路由傳遞，刷新后會(huì)丟失</router-link>
<button @click="paramsBtn2">params往普通路由傳遞，刷新后會(huì)丟失</button>
</div>
</template>
<script>
export default {
name: "home",
data(){
return {
dataId:222,
dataName:'張三'
}
},
methods:{
paramsBtn1(){
//注意：params往動(dòng)態(tài)路由中傳遞，刷新參數(shù)不丟失
this.$router.push({
name:'params1',
params:{id:'22',name:this.dataName}
})
},
paramsBtn2(){
//注意：這里傳遞后，刷新后會(huì)丟失（對象形式下，params參數(shù)不在url中）
this.$router.push({
name:'query1',
params:{id:'22',name:this.dataName}
})
}
}
}
</script>
<style scoped>
</style>接收參數(shù)：this.$route.params
this.$route.query和this.$route.params的正確使用
this.$route.query的使用
(1)、傳參數(shù)：
this.$router.push({
? ? ? ? ?path: '/checkout',
? ? ? ? ?query:{
? ? ? ? ? ? ? ?productId:id,
? ? ? ? ? }
}）(2)、獲取參數(shù)：
this.$route.query.productId
(3)、在url中形式（url中帶參數(shù)）
http://xxx/#/goodsDetails?productId=150642571432849
(4)、頁面之間用路由跳轉(zhuǎn)傳參時(shí)，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)還會(huì)顯示存在（項(xiàng)目中遇到此問題）
this.$route.params的使用
（1）、傳參數(shù)：
// An highlighted block
this.$router.push({
? ? ? ? ?name: 'checkout',
? ? ? ? ?params:{
? ? ? ? ? ? ? ?productId:id,
? ? ? ? ? }
}）;（2）、獲取參數(shù)：
// An highlighted block this.$route.params.productId
（3）、在url中形式（url中不帶參數(shù)）
// An highlighted block http://172.19.186.224:8080/#/checkout
（4）、頁面之間用路由跳轉(zhuǎn)傳參時(shí)，刷新跳轉(zhuǎn)后傳參的頁面，數(shù)據(jù)不存在（(url中沒帶參數(shù))）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue后臺管理添加多語言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺管理添加多語言功能的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue 集成 vis-network 實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法
這篇文章主要介紹了vue 集成 vis-network 實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì) ,需要的朋友可以參考下2019-08-08
vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動(dòng)效果
這篇文章主要介紹了如何基于Vue2實(shí)現(xiàn)歌曲播放和歌詞滾動(dòng)效果,文中通過代碼示例和圖文講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動(dòng)手試一下2024-09-09
vue3.x使用swiper實(shí)現(xiàn)卡片輪播
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實(shí)現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
文章介紹了Vue中組件的基本使用、定義、注冊、書寫標(biāo)簽和嵌套等關(guān)鍵步驟和注意事項(xiàng),詳細(xì)解釋了組件的配置選項(xiàng)、如何通過Vue.extend創(chuàng)建組件以及組件實(shí)例對象與Vue實(shí)例對象的區(qū)別,還提及了單文件組件的結(jié)構(gòu)和編寫邏輯,并強(qiáng)調(diào)了組件原型鏈的重要性2025-10-10
Vue生命周期和鉤子函數(shù)的詳解與經(jīng)典面試題
Vue生命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程,vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-10-10
關(guān)于Vue?監(jiān)控?cái)?shù)組的問題
這篇文章主要介紹了Vue?監(jiān)控?cái)?shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測到，對vue監(jiān)控?cái)?shù)組知識是面試比較常見的問題，感興趣的朋友一起看看吧2022-05-05