用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官网地址：/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.$mit( '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')