目录
方法二：通过设置 Session Storage/local Storage缓存的形式进行传递
2、 对Session Storage/local Storage缓存进行统一封装
方法一：通过路由带参数进行传值
需求：两个页面A,B，页面A传递参数值phase给页面B.
做法：
1）页面A附加参数：//更新地址栏里面的信息哦
router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B
2） 页面B获取地址栏中的参数；
this.$route.query.project_id
方法二：通过设置 Session Storage/local Storage缓存的形式进行传递
想了解更多有关sessionStorage/localStorage,请移步：
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916
1、 原生用法使用
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的使用不规范，所以造成了存储空间的浪费和不够用
解决：
封装storage的使用方法，统一处理
规范storage的key值的命名规则
规范storage的使用规范
2、 对Session Storage/local Storage缓存进行统一封装
import localstorage from '@src/util/localstorage';
import sessionstorage from '@src/util/sessionstorage';
import storage from '@src/util/storage';
storage.storage('l','djjdjjd','jwejjwjejw',1);
storage.storage('s','djjdjjd','jwejjwjejw',1);
let a = storage.storage('l','djjdjjd',undefined,null);
console.log(a)例如：页面A,B
页面A中设置：storage.set('s','djjdjjd','jwejjwjejw',1);
页面B中获取：storage.get('s')
ps:Session Storage（程序退出销毁） 和 Local Storage（长期保存）
localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M
方法三：父子组件之间的传值(通过props属性)
1、父组件给子组件传值
父组件核心代码：
ps: SubmitTest 为子组件名称
<SubmitTest :iteration_id='this.iteration_id'/>子组件核心代码：
props: {
iteration_id: {
type: String
}2、子组件给父组件传值(通过emit事件)
具体参考：https://www.cnblogs.com/LoveAndPeace/p/7273648.html
方法四：不同组件之间传值，通过eventBus
场景：小项目，页面量较少的情况下使用
使用前可以在全局定义一个eventBus
window.eventBus = new Vue();
在需要传递参数的组件中，定义一个emit发送需要传递的值，键名可以自己定义（可以为对象）
eventBus.$emit('eventBusName', id);
在需要接受参数的组件重，用on接受该值（或对象）
//val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br> console.log(val)<br>})
最后记住要在beforeDestroy()中关闭这个eventBus
eventBus.$off('eventBusName');方法五：vuex进行传值
场景：vuex主要是是做数据交互，适用于大项目，页面量较多的业务
解决难题：父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手
例子： 两个组件A和B，vuex维护的公共数据是地理位置，现在A和B页面显示的是相同的地理位置。 需求想实现：如果A修改了地理位置，则B页面的显示随之修改，反之B修改同理。这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。
vuex了解：
参考
https://blog.csdn.net/qq_35430000/article/details/79291287