詳解Vue中一種簡易路由傳參辦法
更新時(shí)間：2017年09月15日 14:20:25 作者：肖恩的球
本篇文章主要介紹了詳解Vue中一種簡易路由傳參辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
情景模擬：
A頁面中，有一些div是根據(jù)A中的book數(shù)據(jù)通過v-for生成的，比如item。
并且點(diǎn)擊會根據(jù)路由跳轉(zhuǎn)到B頁面。
而跳轉(zhuǎn)到B頁面后，我需要A中的item。
<div v-for="(item,index) in book" :class='{on:$route.path === `/${item.to}/`}' @click='toOther(item.to)'>
</div>
toOther(to,run) {
if(this.$route.path!==`/${to}`){
location.hash = to;
}
},
解決辦法：
在A中的click事件中將item傳進(jìn)toOther()函數(shù)中，再根據(jù)路由傳入
toOther(to,run) {
if(this.$route.path!==`/${to}`){
location.hash = to+'?'+run.key;
}
},
即將要傳的參數(shù)添加在原本url加？之后，這樣既不影響路由，也比較方便。
如圖1所示：
如圖2，這樣子我們便可以在 this.$route 的fullPath中拿到A中我們需要傳遞的參數(shù)了。
具體要拿還需要進(jìn)行字符串的分割取出所需的信息，但是這樣子會很繁瑣，我們只需多加幾個(gè)字，
在你的參數(shù)前加上'sth'=
toOther(to,run) {
if(this.$route.path!==`/${to}`){
location.hash = to+'?'+'book_key='+run.key;
}
},
你就會發(fā)現(xiàn)你可以在query中拿到這些個(gè)數(shù)據(jù)
并且是一個(gè)object的形式
簡直不能更完美!
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法
KML 文件作為一種標(biāo)準(zhǔn)的地理數(shù)據(jù)格式,廣泛應(yīng)用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實(shí)現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個(gè)文檔，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
隨著搬運(yùn)工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響。所以給圖片或視頻加上水印顯得極其重要。本文分享一個(gè)由canvas和vue.js制作的圖片水印添加器，需要的可參考一下2022-06-06
這篇文章主要介紹了vue2如何獲取上頁的url地址問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Element使用el-table組件二次封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能詳細(xì)代碼
最近項(xiàng)目中讓實(shí)現(xiàn)一個(gè)導(dǎo)入導(dǎo)出Excel的功能,下面這篇文章主要給大家介紹了關(guān)于前端利用vue實(shí)現(xiàn)導(dǎo)入和導(dǎo)出功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue中的錨點(diǎn)定位問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過js插件定義展開詳細(xì)文章介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
在Vue中,使用EventBus可以實(shí)現(xiàn)組件間的通信,如何使用EventBus？?都需要做哪些配置呢？他的注意事項(xiàng)是什么呢？下面就跟隨小編一起學(xué)習(xí)一下吧2024-02-02