Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式
最近接觸了vue項(xiàng)目，這里記錄一下vue跳轉(zhuǎn)到下一頁(yè)面攜帶參數(shù)的兩種方式。
典型應(yīng)用場(chǎng)景：列表頁(yè)跳轉(zhuǎn)到詳情頁(yè)
一、配置路由
文件路徑：src/router/config.php
import Vue from 'vue'
import Router from 'vue-router'
import classify from '.././components/classify/classify.vue'
import classifyChild from '.././components/classify/classifyChild.vue'
export default new Router({
mode: 'history',
routes: [
{
path: '/classify',
name: ' classify',
component: classify
},
{
path: '/classify/classifyChild',
name: 'classifyChild',
component: classifyChild
},
]
})
二、頁(yè)面跳轉(zhuǎn)及傳參
//方式一
<router-link :to="{name:'classifyChild',params:{id:item.id}}">
<button>跳轉(zhuǎn)</button>
</router-link>
//方式二
<router-link :to="{path:'/classify/classifyChild',query:{id:item.id}}">
<button>跳轉(zhuǎn)</button>
</router-link>
三、參數(shù)接收
//對(duì)應(yīng)于方式一 let id=this.$route.params.id; //對(duì)應(yīng)于方式二 let id=this.$route.query.id;
補(bǔ)充知識(shí)：關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題
首先在store中定義所需要的變量可以進(jìn)行初始化，再定義一個(gè)方法，登錄成功后A頁(yè)面，跳轉(zhuǎn)到B頁(yè)面之前，需要直接調(diào)用store中存儲(chǔ)數(shù)據(jù)的方法，全局可以使用，順序是，先調(diào)用store中的數(shù)據(jù)，其次調(diào)用sessionStorage和localStorage中的數(shù)據(jù)。
這樣的話，可以避免A頁(yè)面跳轉(zhuǎn)B頁(yè)面時(shí)候，手動(dòng)刷新才顯示信息。
直接登錄成功后，直接調(diào)用store的方法，把值存儲(chǔ)進(jìn)去，B頁(yè)面可以直接顯示用戶信息。必須在store定義方法，登錄成功后調(diào)用方法進(jìn)行回顯用戶信息。在這里插入圖片描述
如此一來，就可以避免必須手動(dòng)刷新一下才會(huì)顯示信息。
以上這篇Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)監(jiān)聽localstorage值變化
這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽localstorage值變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在本篇文章里小編給大家整理的是一篇關(guān)于vue中進(jìn)行微博分享的實(shí)例內(nèi)容，有需要的朋友們可以參考下。2019-10-10
這篇文章主要介紹了jquery和vue對(duì)比，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Electron進(jìn)程間通信的實(shí)現(xiàn)
本文主要介紹了Electron進(jìn)程間通信的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue3父子組件互調(diào)方法的實(shí)現(xiàn)
本文主要介紹了Vue3父子組件互調(diào)方法的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue Element UI自定義描述列表組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue路由攔截器和請(qǐng)求攔截器知識(shí)點(diǎn)總結(jié)文章，有興趣的朋友們學(xué)習(xí)下。2019-11-11
這篇文章主要介紹了vue3+vite2+mqtt連接遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04