vue跳转传参-隐藏参数-参数刷新页面问题
问题描述
路由时用的用的router,官网给的传参方式query,params。
可是问题是
query传参会在url显示传的参数,
params传参可以隐藏但是一刷新页面params里的参数就没了很蛋疼
解决办法
用vuex保存变量来解决,但是问题来了如果好多页面都是这种那不是要定义好多变量。
让后想到动态添加对象属性和值不就可以解决么,下面解决代码
vuex中定义变量存储
export default new Vuex.Store({
state: {
parameters:{}//保存页面传参
},
getters: {
parameters : state => {//获取方法
return state.parameters;
}
},
mutations: {
setParameters : (state,parametersData) => {//页面参数传递格式{key:'key',value:'value'}
if(parametersData){
//试了好久state.parameters[key]=value这样会报错只能先取出来添加属性再赋值
let parameters=state.parameters;
parameters[parametersData.key]=parametersData.value;
state.parameters=parameters;
}
}
},
actions: {
},
modules: {
}
})
跳转页保存变量
editClick(id){
this.$store.commit("setParameters",{key:'myKey',value:id});
this.$router.push("edit")
},
跳转目标页面获取变量
getMyId() {
let parameters=this.$store.getters.parameters;
if(parameters['myKey']){
//该干嘛干嘛
}
},
这样一来所有跳转传参都可以调用这两个方法 key,value动态添加就可以
页面刷新参数消失问题解决
然后最后再vuex中统一做页面刷新
在App.vue中统一做页面刷新保存到sessionStorage中
App.vue 页面created代码
created () { //页面刷新store数据备份
if (sessionStorage.getItem("store") ) { //在页面加载时读取sessionStorage里的状态信息
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
这样其他页面就可以直接
//添加或修改参数
this.$store.commit("setParameters",{key:'myKey',value:1});
this.$store.getters.parameters['myKey']
哎。。params自己能解决页面刷新就不用这么麻烦了
最近才研究vue好多坑哦 哎谁说简单的来着,有没有想过我们这种菜鸡的感受!!!