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: '/'})刷新無(wú)效果問(wèn)題
首先在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)行回顯用戶信息。在這里插入圖片描述
如此一來(lái)，就可以避免必須手動(dòng)刷新一下才會(huì)顯示信息。
以上這篇Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)簡(jiǎn)單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue如何解決this.refs拿取v-for下元素undefine問(wèn)題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue.js?el-table虛擬滾動(dòng)完整實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動(dòng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決
這篇文章主要介紹了el-form-item?prop屬性動(dòng)態(tài)綁定不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
如何在Vue中使localStorage具有響應(yīng)式(思想實(shí)驗(yàn))
這篇文章主要介紹了如何在Vue中使localStorage具有響應(yīng)式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
elementUI Tree 樹(shù)形控件的官方使用文檔
這篇文章主要介紹了elementUI Tree 樹(shù)形控件的官方使用文檔，用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開(kāi)或折疊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
本篇和大家分享的是學(xué)習(xí)Vuejs的總結(jié)和調(diào)用webapi的一個(gè)小示例；具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問(wèn)題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來(lái)構(gòu)建用戶界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來(lái)分享一個(gè)Vue中非常經(jīng)典的問(wèn)題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語(yǔ)法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07