Vue页面参数传递的方法

一. 通过路由带参数进行传值

（1）页面A附加参数(query中值为附带参数)

this.$router.push({ path: '/menu', query: { name: 'zhangsan', time: '2020/7/15' } })

（2）页面B获取地址栏中的参数

this.$route.query.name

获取参数name，参数time以此类推。

缺点：

1）参数直接暴露，安全性不高；

2）参数过长时，影响地址栏美观。

二. 通过设置 sessionStorage/localStorage缓存的形式进行传递

注：sessionStorage(会话存储)：生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

localStorage(本地存储)：生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。不可跨浏览器共用。

window.localStorage['aaa']='一个例子啊'
 
console.log(window.localStorage.getItem('aaa'))
 
window.localStorage.setItem('test1',[1,2,3,4,5,6])
 
window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})
 
window.localStorage.setItem('test3','dfdfdf')
 
console.log(window.localStorage.getItem('test1'))
 
console.log(window.localStorage.getItem('test2'))
 
console.log(window.localStorage.getItem('test3'))
 
 
window.sessionStorage.setItem('test1',[1,2,3,4,5,6])
 
window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})
 
window.sessionStorage.setItem('test3','dfdfdf')
 
console.log(window.sessionStorage.getItem('test1'))
 
console.log(window.sessionStorage.getItem('test2'))
 
console.log(window.sessionStorage.getItem('test3'))

缺点：

1）直接使用 localStorage[‘aaa’] = ‘xxx’ 这种原生语法实现，耦合度太低，一旦需要修改，涉及到的代码会很多。

2）key的名字难免重复，会造成全局污染。

3）因为localStorage使用不规范会造成存储空间的浪费和不足。

解决：

1）封装storage的使用方法，统一处理

2）规范storage的key值的命名规则

3）规范storage的使用规范

三. 父子组件之间的传值（待补充）

1. 父组件给子组件传值（通过props属性）

2. 子组件给父组件传值（通过emit事件）

四. 不同组件之间传值，通过eventBus（待补充）

场景：小项目，页面量较少的情况下使用。

五. vuex进行传值

场景：vuex主要是做数据交互，适用于大项目，页面量较多的业务。

解决难题：兄弟组件间传值（兄弟组件下又有父子组件），或者大型单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手。

vuex使用参考：https://vuex.vuejs.org/zh/installation.html

主要代码：在项目的store文件夹中的index,js中创建一个store

export default new Vuex.Store({
  state: {
	  appkey: '',
	  infokey: ''
  },
  mutations: {
	  setAppkey(state,appkey){
		  state.appkey = appkey;
	  },
	  setInfokey(state,infokey){
		  state.infokey = infokey;
	  }
  },
  actions: {},
  modules: {}
});

其中 state 中为需要传递的值，mutation中为监控值变化并修改值的方法，通过store.commit（）方法来触发状态变更以及store.state来获取状态对象。

store.commit("setAppkey",response.data.HttpData.data.appkey);
store.commit("setInfokey",response.data.HttpData.data.infokey);
console.log(store.state.appkey,store.state.infokey);

欢迎批评指正！！！