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