vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法
更新時(shí)間：2019年08月12日 10:26:44 作者：anshengsuiyeu
這篇文章主要介紹了vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.需求：
點(diǎn)擊商場(chǎng)跳轉(zhuǎn)到商業(yè)體列表
解決方案：
元頁(yè)面：
a標(biāo)簽中添加跳轉(zhuǎn)函數(shù)
<a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商場(chǎng)</a>
toMallInfo: function(mallCode){
this.$router.push({
path: '/propertyInfo/mall/mallList',
// name: 'mallList',
query: {
mallCode: 'M000989'
}
})
},
將將跳轉(zhuǎn)的url添加到 $router中。
path 中的url 最前面加 / 代表是根目錄下，不加則是子路由
通過(guò)path + query 的組合傳遞參數(shù)
----
跳轉(zhuǎn)頁(yè)面接收參數(shù)
created(){
this.getParams()
},
methods :{getParams(){
// 取到路由帶過(guò)來(lái)的參數(shù)
const routerParams = this.$route.query.mallCode
// 將數(shù)據(jù)放在當(dāng)前組件的數(shù)據(jù)內(nèi)
this.mallInfo.searchMap.mallCode = routerParams;
this.keyupMallName()
}
}，
watch: {
'$route': 'getParams'
}
解決?。。?/p>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue中簡(jiǎn)單彈框dialog的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。接下來(lái)通過(guò)本文給大家分享Vue.js下載方式及基本概念，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)
開(kāi)發(fā)離不開(kāi)權(quán)限,不同的用戶登錄,根據(jù)不同的權(quán)限,可以訪問(wèn)不同的管理目錄，本文主要介紹了vue-element-admin按鈕級(jí)權(quán)限管控的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題
這篇文章主要介紹了解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue2.0組件之間傳值、通信的多種方式以及注意要點(diǎn)，需要的朋友可以參考下2018-02-02
vue + socket.io實(shí)現(xiàn)一個(gè)簡(jiǎn)易聊天室示例代碼
本篇文章主要介紹了vue + socket.io實(shí)現(xiàn)一個(gè)簡(jiǎn)易聊天室示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)pdf文件預(yù)覽的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)的功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的小伙伴可以參考一下2023-03-03