vue 页面跳转(兄弟组件)通过路由或vuex 进行传递参数，并且实现刷新数据不消失

 

用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')