vue params、query傳參使用詳解
最近在學(xué)習(xí)Vue，本文介紹了vue params、query傳參使用，分享給大家，也給自己留個筆記
聲明式：<router-link :to="...">
編程式：router.push(...)
這兩種方式 都可以實現(xiàn)跳轉(zhuǎn)鏈接，在上篇文章繼續(xù)，通過A組件跳轉(zhuǎn)鏈接到B組件并且傳參數(shù)。
1、router.push使用
router/index.js
export default new Router({
routes: [
{
path: '/',
name: 'A',
component: require('../components/A')
},
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
]
})
上邊，在路由中為B組件添加兩個參數(shù) name ,age
A組件，綁定一個@click事件，跳轉(zhuǎn)B組件傳參 使用params
<template>
<div> <!---只允許有一個最外層標(biāo)簽 ！-->
<div>
<p>{{message}}</p>
<p @click="toBFun">跳轉(zhuǎn)B組件啊啊</p>
<!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳轉(zhuǎn)B組件啊啊</router-link>-->
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message: 'vue好帥啊！'
}
},
methods: {
toBFun: function(){
this.$router.push({name:'B',params:{name:'xy',age:22}});
}
}
}
</script>
<style>
</style>
這時瀏覽器會顯示 ：http://localhost:8080/#/B/xy/22
在看下query 傳值及地址變化
同樣在 router/index.js路由文件中 不變有兩個參數(shù)name,age
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
在A組件中，之前參數(shù)傳遞是通過params,
this.$router.push({name:'B',params:{name:'xy',age:22}});
替換后，query
this.$router.push({name:'B',query:{name:'xy',age:22}});
這時瀏覽器會發(fā)現(xiàn)：http://localhost:8080/#/?name=xy&age=22
通過以上兩種，頁面刷新后，參數(shù)還會保留的。
獲取值有些不相同：
params：this.$route.params.name;
query:this.$route.query.name;
------------------------ 還有種方式--------------------------------------------
使用 router-link
<router-link :to="{ path: '/B',query:{name:'張飛',age:22}}">跳轉(zhuǎn)B組件</router-link>
跳轉(zhuǎn)后，瀏覽器地址為：http://localhost:8080/#/B?name=zzz&age=22
跟 this.$router.push(...) 是一樣的
<router-link :to="{path:'/B/123'}">
跳轉(zhuǎn)B組件</router-link>
</div>
{
path: '/B/:name',
name: 'B',
component: require('../components/B')
}
取值
this.$route.params.name
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏
這篇文章主要介紹了vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的安裝教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
解決element?ui?cascader?動態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動態(tài)加載回顯問題解決方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
moment是一款多語言支持的日期處理類庫, 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下2021-05-05
隨著前端技術(shù)的不斷發(fā)展,地圖應(yīng)用在我們的項目中越來越常見,本文將介紹如何在Vue3項目中集成高德地圖,并通過簡單的配置實現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下2024-09-09
淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問題，具有很好的價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置）
制作一個折線圖用于顯示當(dāng)前24小時的數(shù)據(jù)，并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue實現(xiàn)一個無限加載列表功能,需要的朋友可以參考下2018-11-11
Vue3中使用Element?Plus時el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下2022-03-03
Element的el-tree控件后臺數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺數(shù)據(jù)結(jié)構(gòu)的生成以及方法的抽取，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03