VUE项目从详情页退回列表页，保留列表页的筛选条件（筛选条件为单选），以及刷新后恢复默认的一个筛选状态

vue项目做的一个“花名册”页面，从“花名册”页面可以点击某一个人的名字，进入这个人的信息详情表格页面，而且这个人的信息详情页面中有一个“直属上级”字段时可以点击跳转的，点击以后跳转到该汇报人的信息详情页面，汇报人里还有汇报人，以此类推，大概有4层到5层的跳转。
现在的需求是，筛选框有3种状态，每一种状态里只能选择一种分类。如果后退时，必须是原路返回，一层一层的往出退，不能直接退到“花名册”页面，并且退到最外层“花名册”页面时，必须要保留之前的筛选条件

1、点击姓名进入个人信息页

一开始，我把获取个人信息放到了”花名册“的组件中，因为点击姓名后，跳转时，要获取用户的权限，跳转到相应的权限所对应的个人信息页面，而都断接口，将获取权限和获取个人详细信息放到一个接口中了，所以一开始的做法是，在“花名册”页面将权限和详细信息都获取了，并且跳转时，将个人信息的数据，通过路由传参的形式，传过去，再渲染，此时会有两个问题，第一，个人信息页面刷新后会丢失数据，第二、如果后台数据有所变化，那么页面刷新也获取不到最新的数据。
针对上述问题，我尝试的使用了vux加本地缓存，第一个问题解决了，可是第二个问题得不到解决
最终，我想到，将获取个人信息的方法，放到”个人信息“组件中，将获取权限和获取个人信息分开，就完美的解决了上述问题，并且封装为api.js模块
代码如下:

// 获取花名册员工详细信息接口（分两步，第一步，先获取权限信息，第二步，跳转到员工详细信息页面时，再获取表格数据，完成渲染）// 第一步，先获取权限export const getType = (params) => get('roster/detail?usercode=' + params).then(res => {// 跳转router.push({path: '/roster_userinfo/' + res.data.type,// 携带被查询员工编号query: {info: params}})})// 第二步 跳过去以后，获取被查询员工的详细信息export const getDetailedInformation = (params) => get('roster/detail?usercode=' + params)

这样，就可以在需要的地方导入使用就可以啦

2、实现一层一层后退

如果单纯的利用BOM对象后退，如果url地址地址不变的话，页面是不会刷新的，所以单纯的点击后退按钮是不行的。
给每一个组件加上watch监听，就可以实现啦

// 解决跳转到相同的url路径时，页面不刷星的问题watch: {'$route' (to, from) {this.$router.go(0);}},

3、实现筛选条件保留之前的高亮的状态

实现这个功能，我一开始想到了keep-alive组件，但是跳一次路由可以，如果连续跳2次以上，就不行了。
那么我就想到了vuex + 本地缓存
代码如下：
1、首先封装本地缓存的方法

//storage.js
// 封装本地缓存的方法// 储存数据
export const setItem = (key,data) => {if(typeof data === 'object'){window.sessionStorage.setItem(key,JSON.stringify(data))}else{window.sessionStorage.setItem(key,data)}
}// 读取数据
export const grtItem = (key) => {const item = window.sessionStorage.getItem(key)try{const value = JSON.parse(item)if(typeof value === 'object'){return value}else{return item}}catch(err){return item}
}// 移除数据
export const removeItem = (key) => {window.sessionStorage.removeItem(key)
}

2、vuex代码：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)// 导入本地存储的方法
import { setItem,grtItem } from '@/utils/storage.js'export default new Vuex.Store({state: {// 定义4个状态参数staffstatus: grtItem('staffstatus'),staffstatuschild:grtItem('staffstatuschild'),positiontype: grtItem('positiontype'),page: grtItem('page'),    },mutations: {setStaffstatus(state,data){state.staffstatus = datasetItem('staffstatus',state.staffstatus)},setStaffstatuschild(state,data){state.staffstatuschild = datasetItem('staffstatuschild',state.staffstatuschild)},setPositiontype(state,data){state.positiontype = datasetItem('positiontype',state.positiontype)},setPage(state,data){state.page = datasetItem('page',state.page)}},actions: {},modules: {}
})

3、花名册组件代码：
将设置默认的筛选条件代码写到一个过渡组件中，这样就解决了好多问题，因为这个项目的登录功能不在我的项目中，所以需要一个过渡组件来获取token和保存token，以及把默认状态值设置到过渡组件中时，只有初次打开花名册页面，才回去显示默认状态，因为后退会触发页面刷新，所以不能设置到花名册的组件中，每次后退都会回到默认状态，与保留筛选条件相冲突

// 过渡组件created() {// 页面初次加载，将“在职”状态设置为默认值this.$store.commit('setStaffstatus','5')this.$store.commit('setPage','1')// 获取tokenthis.getToken()}

然后进入了花名册组件

created() {// 页面首次加载，获取花名册表格数据this.getRosterList()},

// 获取全局数据getRosterList: function () {// 筛选条件初始化，把默认值高亮this.active_tab1 = this.$store.state.staffstatusthis.active_tab2 = this.$store.state.staffstatuschildthis.active_tab3 = this.$store.state.positiontypethis.queryInfo.pagenum = Number(this.$store.state.page)if(this.active_tab1 == '5'){this.is_tab2 = true}else{this.is_tab2 = falsethis.$store.commit('setStaffstatuschild','')}if(this.active_tab1 == '6'){// this.is_join_day = falsethis.is_firedate = true}else{// this.is_join_day = truethis.is_firedate = false}// 定义参数let params = {staffstatus:this.$store.state.staffstatus || '',positiontype:this.$store.state.positiontype || '', staffstatuschild:this.$store.state.staffstatuschild || '', page:Number(this.$store.state.page) || 1 ,limit: this.queryInfo.pagesize,}getList(params).then((res) => {// 员工状态选项卡数据赋值this.obj1 = res.data.staffstatus // 在职菜单的二级菜单this.obj2 = res.data.staffStatuschild// 岗位性质选项卡赋值this.obj3 = res.data.positiontype// 总条数渲染this.total = res.data.total// 全部列表数据this.rosterList = res.data.list})},

4、切换筛选条件后，更新vuex的值

// 以其中的一个点击处理函数为例
// 员工状态的点击处理函数selected_1(key) {if(key == '5'){this.is_tab2 = true}else{this.is_tab2 = falsethis.$store.commit('setStaffstatuschild','')}if(key == '6'){// this.is_join_day = truethis.is_firedate = true}else{// this.is_join_day = truethis.is_firedate = false}const i = key == this.active_tab1if(i){this.active_tab1 = ''this.is_tab2 = falsethis.active_tab2 = ''this.is_join_day = truethis.is_firedate = false}else{this.active_tab1 = key;}// 设置tab1this.$store.commit('setStaffstatus',this.active_tab1)this.$store.commit('setPage',1)// 变更筛选条件，将分页的page重置为1this.queryInfo.pagenum = 1this.getRosterList()},

5、最后，我增加了一个功能，刷新页面，将筛选条件恢复到默认状态

一开始我想在created钩子函数中运行舒适化代码，可是不行，因为后退也会触发created，点击刷新也会触发，这样就不对了，于是上网查了查，如何监听单独的浏览器刷新
下面是代码：

// 1 监听浏览器的刷新事件，注册方法mounted() {// 监听浏览器的刷新事件window.addEventListener('beforeunload', this.unload)// window.addEventListener('beforeunload', e => this.unload) // 注册一个匿名函数},// 2 销毁这个监听事件destroyed() {// 销毁这个监听事件，需要找到这个函数，如果使用的是匿名函数的话，无法查找这个函数，这个事件也就没有办法被移除 ，在其他页面仍然会执行这个监听事件window.removeEventListener('beforeunload', this.unload)},methods:{// 3、监听浏览器的刷新，这个方法，后退时是不会触发的unload() {// 用户刷新时，将筛选状态置为默认参数this.$store.commit('setStaffstatus','5')this.$store.commit('setPage','1')this.$store.commit('setStaffstatuschild','')this.$store.commit('setPositiontype','')},}

最后，在这梳理一下，整个过程：
1、页面初次加载在过渡页面设置默认值
2、进入花名册页面时，页面读取vuex中的默认状态数据
3、点击切换筛选条件，改变高亮状态的同时，触发vuex的mutations方法去改变vuex中的数据，vuex的数据时响应式的，数据改变就会驱动试图的更新，同时将改变后的数据做了本地缓存，将vuex的数据持久化
4、这样就实现了，保留状态的后退
欢迎大家补充