VUE项目从详情页退回列表页,保留列表页的筛选条件(筛选条件为单选),以及刷新后恢复默认的一个筛选状态
vue项目做的一个“花名册”页面,从“花名册”页面可以点击某一个人的名字,进入这个人的信息详情表格页面,而且这个人的信息详情页面中有一个“直属上级”字段时可以点击跳转的,点击以后跳转到该汇报人的信息详情页面,汇报人里还有汇报人,以此类推,大概有4层到5层的跳转。现在的需求是,筛选框有3种状态,每一种状态里只能选择一种分类。如果后退时,必须是原路返回,一层一层的往出退,不能直接退到“花名册”页面,并
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、这样就实现了,保留状态的后退
欢迎大家补充
更多推荐
所有评论(0)