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好多坑哦 哎谁说简单的来着，有没有想过我们这种菜鸡的感受！！！