【无标题】

vue中的路由守卫应用
场景：在输入条件之后，会查询出列表数据，列表数据有对应的操作按钮，操作按钮包括：查看，撤回，编辑等；点击各行的查看按钮，会跳转到对应一行的详情页面，详情页的尾部有返回操作，当点击返回操作会重新进入到列表页----需求----点击返回需要保存之前的查询条件和查询出来的数据

技术：vuex + beforeRouterEnter钩子

//点击查看
go(row){
	//changeListQuery是模块化之后的文件名
	//listQuery可以通过
	this.$store.dispatch('changeListQuery/changeListQuery',this.listQuery)
	this.$store.dispatch('changeListQuery/changeSelectQuery',this.selectQuery)
	this.$router.push({path:'/migration/edit'})
}

//列表保存条件文件
beforeRouterEnter(to,from,next) {
	if(from.name === 'detailPage'){
		next(vm => {
			vm.isDetailBackFlag = true
			//可以通过isDetailBackFlag判断之后，给列表页的参数赋值（vuex中的数据）
			vm.detailBackSearch()
		})
	}else{
		next()
	}
}

//vuex文件
export default {
	state:{
		xxx:,
	}
}

const mutation = {
	SET_LIST_QUERY:(state,listQuery) => {
		state.listQuery = JSON.parse(JSON.stringify(listQuery))
	}
	SET_SELECT_QUERY:(state,selectQuery) => {
		state.selectQuery = JSON.parse(JSON.stringify(selectQuery))
	}
}

const actions = {
	changeListQuery({commit},listQuery){
		commit('SET_LIST_QUERY',listQuery)
	}
	changeSelectQuery({commit},selectQuery){
		commit('SET_SELECT_QUERY',selectQuery)
	}
}

返回按钮的逻辑直接路由跳转即可