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 = data
setItem('staffstatus',state.staffstatus)
},
setStaffstatuschild(state,data){
state.staffstatuschild = data
setItem('staffstatuschild',state.staffstatuschild)
},
setPositiontype(state,data){
state.positiontype = data
setItem('positiontype',state.positiontype)
},
setPage(state,data){
state.page = data
setItem('page',state.page)
}
},
actions: {},
modules: {
}
})
3、花名册组件代码：
将设置默认的筛选条件代码写到一个过渡组件中，这样就解决了好多问题，因为这个项目的登录功能不在我的项目中，所以需要一个过渡组件来获取token和保存token，以及把默认状态值设置到过渡组件中时，只有初次打开花名册页面，才回去显示默认状态，因为后退会触发页面刷新，所以不能设置到花名册的组件中，每次后退都会回到默认状态，与保留筛选条件相冲突
// 过渡组件
created() {
// 页面初次加载，将“在职”状态设置为默认值
this.$store.commit('setStaffstatus','5')
this.$store.commit('setPage','1')
// 获取token
this.getToken()
}
然后进入了花名册组件
created() {
// 页面首次加载，获取花名册表格数据
this.getRosterList()
},
// 获取全局数据
getRosterList: function () {
// 筛选条件初始化，把默认值高亮
this.active_tab1 = this.$store.state.staffstatus
this.active_tab2 = this.$store.state.staffstatuschild
this.active_tab3 = this.$store.state.positiontype
this.queryInfo.pagenum = Number(this.$store.state.page)
if(this.active_tab1 == '5'){
this.is_tab2 = true
}else{
this.is_tab2 = false
this.$store.commit('setStaffstatuschild','')
}
if(this.active_tab1 == '6'){
// this.is_join_day = false
this.is_firedate = true
}else{
// this.is_join_day = true
this.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 = false
this.$store.commit('setStaffstatuschild','')
}
if(key == '6'){
// this.is_join_day = true
this.is_firedate = true
}else{
// this.is_join_day = true
this.is_firedate = false
}
const i = key == this.active_tab1
if(i){
this.active_tab1 = ''
this.is_tab2 = false
this.active_tab2 = ''
this.is_join_day = true
this.is_firedate = false
}else{
this.active_tab1 = key;
}
// 设置tab1
this.$store.commit('setStaffstatus',this.active_tab1)
this.$store.commit('setPage',1)
// 变更筛选条件，将分页的page重置为1
this.queryInfo.pagenum = 1
this.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、这样就实现了，保留状态的后退
欢迎大家补充
6674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
