最近接觸了vue項目，這里記錄一下vue跳轉到下一頁面攜帶參數的兩種方式。
典型應用場景：列表頁跳轉到詳情頁
一、配置路由
文件路徑：src/router/config.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
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 }, ]}) |
二、頁面跳轉及傳參
|
1
2
3
4
5
6
7
8
9
|
//方式一<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> |
三、參數接收
|
1
2
3
4
5
|
//對應于方式一let id=this.$route.params.id; //對應于方式二let id=this.$route.query.id; |
補充知識：關于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題
首先在store中定義所需要的變量可以進行初始化，再定義一個方法，登錄成功后A頁面，跳轉到B頁面之前，需要直接調用store中存儲數據的方法，全局可以使用，順序是，先調用store中的數據，其次調用sessionStorage和localStorage中的數據。
這樣的話，可以避免A頁面跳轉B頁面時候，手動刷新才顯示信息。
直接登錄成功后，直接調用store的方法，把值存儲進去，B頁面可以直接顯示用戶信息。必須在store定義方法，登錄成功后調用方法進行回顯用戶信息。在這里插入圖片描述
如此一來，就可以避免必須手動刷新一下才會顯示信息。
以上這篇Vue頁面跳轉傳遞參數及接收方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/fate_sky8521/article/details/90106505
