vue 页面跳转2【转】
用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')
