|
目标：实现A页面与B页面之间的传值，并且将该值保存在B页面（即：从别的页面过来，或者刷新浏览器，B页面仍能显示该值）。
方式一：vue-router传值
说到页面传值，马上想到的就是通过router在页面跳转的时候，将值带过去。
将A页面中的title字段，在页面跳转后传递给B页面，在A页面中加入如下代码：（需在router中配置B页面）
this.$router.push({
name: 'B',
params: {
title: title
}
})
B页面接收
data() {
return {
title: this.$route.params.title,
}
},
实现效果：从A页面跳转到B页面，title值传递成功。
发现问题：该方式只限A、B页面之间的传值，当从C页面跳转到B后，或者页面刷新，title值恢复初始化的空值，没有实现目标。
方式二：vuex状态提升
既然页面传值不能解决问题，那么用vuex将title提升为全局变量总可以了吧。
安装（切换到项目根目录）
npm install vuex --save-dev
新建文件夹 store，在该文件夹下新建 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
title:''
},
mutations:{
tranTitle(state,title){
state.title = title;
}
},
actions:{
tranTitleFun(context,title){
context.commit("tranTitle",title);
}
}
});
export default store;
在从A页面跳转到B页面的函数中加入：
this.$store.dispatch("tranTitleFun",title);
this.$router.push('/B');
实现效果：title已被提升为全局变量，从A页面跳转到B，title值顺利传递，无论从任何一个页面跳转到B，title值均可正常显示。
发现问题：B页面刷新，title值恢复初始化。
原因：vuex对数据的缓存走的是浏览器的存储，当浏览器刷新时，数据恢复初始化。
方式三：vuex+sessionStotage
vuex和本地存储相结合，在页面刷新时将vuex里的信息保存到sessionStotage里，在页面加载时读出sessionStorage里的信息。
在B页面中加入：
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
},
实现效果：title提升为了全局变量，刷新浏览器仍可正常显示在B页面。
至此，目标完成。
可以看到vue-router，vuex各有其优缺点，可根据具体需要灵活使用。欢迎交流指正。 | 
转播
