用vue搭建整個前端頁面，需要實現一個信息列表的顯示，當點擊某一項時，跳轉到另外一個頁面顯示具體的信息詳情。那么像這種兄弟之間的頁面如何傳遞參呢？
我們都知道在 Vue.js 的項目中，如果項目結構簡單，父子組件之間的數據傳遞可以使用 props 或者$emit 等方式。
那么我就可以先將A子組件將數據傳遞到父組件，然后父組件在傳遞給B子組件，這樣傳遞肯定是沒問題的，但是這樣寫下來就變得復雜了。
下面看一下簡單的傳遞方式
一.頁面跳轉通過路由帶參數傳遞數據(假設A要傳遞參數id到頁面B 且B的路由是path和name都為 ‘AgentMsg’ )
-
// 1.A頁面中的代碼
-
this.$router.push({name: 'AgentMsg', params: {id: id}})
或者通過this.$router.push({path: 'AgentMsg', query: {id: id}})-
// 2.B頁面的路由信息
-
{
-
path: 'AgentMsg',
-
name: 'AgentMsg',
-
component: AgentMsg
-
}
-
// 3.B頁面中的代碼
-
let id = this.$route.params.id
和 A頁面中的 params和query保持一致通過query傳遞參數，頁面刷新后，數據不會消失。但是params刷新后會消失。
通過params傳遞參數，也可以做到刷新后，數據不消失。
將要傳遞的信息寫到B頁面的路由path里邊就可以了。這時候地址欄url的后面會跟上這個傳遞的參數，刷新不會消失。
// 2.B頁面的路由信息 { path: 'AgentMsg/：id', name: 'AgentMsg', component: AgentMsg}
二.使用vuex進行數據傳遞
Vuex官網地址： https://vuex.vuejs.org/zh-cn/intro.html 這里只做簡單的介紹和還是用，復雜的使用情況，自己參照官網。
如果沒有安裝vuex ,通過命令行： npm install vuex --save 進行安裝
然后在 main.js 中引入並在Vue實例中注入
import Vuex from 'vuex'
import store from './store/store'
new Vue({ el: '#app'，store，.....還有其他的一些組件模板等)
構建核心倉庫store.js
Vuex 應用的狀態 state都應當存放在store.js 里面，Vue 組件可以從 store.js 里面獲取狀態，可以把 store 通俗的理解為一個全局變量的倉庫。
但是和單純的全局變量又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 組件也會得到高效更新。
在 src 目錄下創建一個 vuex 目錄，將 store.js 放到 store 目錄下
store.js 中:
import Vuex from 'vuex'
import Vue from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
id: ' '
},
mutations:{
setId(state , id) {
state.id = id
}
}
})
傳遞方法：
A界面改變store中state里的參數：
1、可以通過直接賦值的方法進行改變 this.$store.state.id = (要傳遞的參數id)
2、官方建議的修改方法： this.$store.commit( 'setId' ，(要傳遞的參數id) )
B界面接收變化數據參數：
this.$store.state.id
但是通過 vuex這樣寫，頁面刷新之后，數據也會消失。它只是對變量提升。
如果不想數據刷新消失，就把數據存儲到Local Storage或者Session Storage或者本地存儲庫中。
三.使用web storage進行數據傳遞
以Local Storage為例：
將id參數一’id‘ 這個name 存進localStorage
localStorage.setItem('id' , id)
讀取的時候：
var readId = localStorage.getItem('id')