项目场景:
在列表页进行的条件查询出来的数据,点击查看详情之后,再返回,之前的查询条件会清空,如何不清空?
文章图片
思路 在点击查看的时候,保留查询的条件,等返回的时候,把条件给查询框中的值。这个地方多出用到,所有需要采用vuex,这样更方便。。。每个页面在离开之前,保留查询条件在vuex中,从详情页回来的时候,再把查询条件给赋值到input中
vuex中的写法:这个项目中的vuex是一个modules,在modules中新建文件。
文章图片
引入到index中注册全局的store
文章图片
列表中这样写:
1.点击查询的时候,设置isFilters为ture,
2.根据查询的条件,点击查看的时候,触发vuex的存储事件,存查询的参数到vuex。
3.从详情返回列表的时候,把vuex中的参数给赋值到列表上的查询条件框中。
4.在列表页上,加上一个混入的方法。
5.点击重置的时候,清空vuex中的值。
文章图片
文章图片
混入的代码如下:(单独的文件)
// 用来判断是否是从详细页过来的路径
const filterParamsMixin = {
beforeRouteEnter(to, from, next) {
//在路由加载进入之间,如果不是从当前详情页返回进入列表页的话,则将缓存中的pageNum和pageSize清除
const toFullPath = to.fullPath
.split('/')
.filter((v, i) => i < 3)
.join('')
const fromFullPath = from.fullPath
.split('/')
.filter((v, i) => i < 3)
.join('')
console.log(toFullPath)
console.log(fromFullPath)
if (toFullPath !== fromFullPath) {
// sessionStorage.pageNum = ''
// sessionStorage.pageSize = ''
store.dispatch('setChangeFilter', {})
}
next()
},
}
列表页代码:
// 当路由离开列表页之前
beforeRouteLeave(to, from, next) {
// 当to的路由为详情页面时且isFilters为true(列表页面进行了筛选)时触发
if ((to.name === 'inputDetail' || to.name === 'input') && this.isFilters) {
// 将筛选项赋值给changeFilter
this.$store.dispatch('setChangeFilter', this.form)
}
next()
},
// 当路由进入列表页之前
beforeRouteEnter(to, from, next) {
//当from的路由为详情页面时触发
if (from.name === 'inputDetail' || from.name === 'input') {
next((vm) => {
if (vm.$store._modules.root.state.filterParams.changeFilter !== {}) {
// 把changeFilter值赋给当前筛选项的对象
// vm.form = vm.$store.state.changeFilter
vm.form = vm.$store._modules.root.state.filterParams.changeFilter
// created会在next之前执行。所以获取到筛选数据,可以在这里进行数据的初始化操作
vm.initData()
}
})
} else {
// 如果不是从详情页来的,就直接初始化
next((vm) => {
vm.initData()
})
}
// beforeRouteEnter中不能直接获得this,需要 next ((vm) =>{ vm.$stroe.state.changeFilter })这样获取,
// 而且next里的方法要在create之后执行
},
点击重置,清空vuex中的过滤条件
文章图片
注意点:
文章图片
这个地方要注意的点:
1.vuex中的changeFilter的值,我的项目中隐藏的很深。不太好找,需要在调试的时候细心查找。
2. created会在next()之前执行。所以要想获取到筛选数据,必须得在这里进行数据的初始化操作。不然在created中初始化,此时的查询条件的筛选数据还没获取到。
【vue后台管理|vue 详情页返回列表,过滤查询条件保留】原来的代码中,详情页面还是要写一下。
文章图片
但是太麻烦了,于是同事提供了mixins的方式,就方便了很多。
推荐阅读
- javascript|three.js案例解析之代码实现morph动画
- 极客日常|【极客日常】vue3中实现Array数组更新的方法
- vue|[vue]路由传参的三种方式
- html|Vue项目实战
- 谷粒商城笔记|7.商城业务域名访问
- 谷粒商城笔记|10.认证服务,单点登录
- 前端|【前端面试必知】行内块元素之间的空白间隔是什么原因引起的
- javascript|解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“
- 前端知识|web页面-电子签名