Vue頁面跳轉傳遞參數(shù)及接收方式
更新時間：2020年09月09日 15:42:51 作者：不二青春
這篇文章主要介紹了Vue頁面跳轉傳遞參數(shù)及接收方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
最近接觸了vue項目，這里記錄一下vue跳轉到下一頁面攜帶參數(shù)的兩種方式。
典型應用場景：列表頁跳轉到詳情頁
一、配置路由
文件路徑：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
},
]
})
二、頁面跳轉及傳參
//方式一
<router-link :to="{name:'classifyChild',params:{id:item.id}}">
<button>跳轉</button>
</router-link>
//方式二
<router-link :to="{path:'/classify/classifyChild',query:{id:item.id}}">
<button>跳轉</button>
</router-link>
三、參數(shù)接收
//對應于方式一 let id=this.$route.params.id; //對應于方式二 let id=this.$route.query.id;
補充知識：關于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題
首先在store中定義所需要的變量可以進行初始化，再定義一個方法，登錄成功后A頁面，跳轉到B頁面之前，需要直接調用store中存儲數(shù)據(jù)的方法，全局可以使用，順序是，先調用store中的數(shù)據(jù)，其次調用sessionStorage和localStorage中的數(shù)據(jù)。
這樣的話，可以避免A頁面跳轉B頁面時候，手動刷新才顯示信息。
直接登錄成功后，直接調用store的方法，把值存儲進去，B頁面可以直接顯示用戶信息。必須在store定義方法，登錄成功后調用方法進行回顯用戶信息。在這里插入圖片描述
如此一來，就可以避免必須手動刷新一下才會顯示信息。
以上這篇Vue頁面跳轉傳遞參數(shù)及接收方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關于el-table虛擬滾動的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下2022-12-12
el-form-item?prop屬性動態(tài)綁定不生效問題及解決
這篇文章主要介紹了el-form-item?prop屬性動態(tài)綁定不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
如何在Vue中使localStorage具有響應式(思想實驗)
這篇文章主要介紹了如何在Vue中使localStorage具有響應式,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔，用清晰的層級結構展示信息，可展開或折疊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本篇和大家分享的是學習Vuejs的總結和調用webapi的一個小示例；具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了vue組件通信傳值操作,結合實例形式分析了vue.js父子組件通信及兄弟組件通信相關操作技巧,需要的朋友可以參考下2019-01-01
Vue利用computed解決單項數(shù)據(jù)流的問題
Vue是一個非常流行和強大的前端框架,它讓我們可以用簡潔和優(yōu)雅的方式來構建用戶界面,但是,Vue也有一些需要注意和掌握的細節(jié)和技巧,今天我們來分享一個Vue中非常經(jīng)典的問題,也是一個非常實用的技巧,Vue利用computed解決單項數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結構中，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07