用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保持一致

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 1 7

通過query傳遞引數，頁面重新整理後，資料不會消失。但是params重新整理後會消失。

二.使用vuex進行資料傳遞

然後在 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')