vue 详情页返回列表，过滤查询条件保留
项目场景：在列表页进行的条件查询出来的数据，点击查看详情之后，再返回，之前的查询条件会清空，如何不清空？
https://img-blog.csdnimg.cn/bfdbd6b43a1443d1941e20d8b9ae20c6.png
思路
在点击查看的时候，保留查询的条件，等返回的时候，把条件给查询框中的值。这个地方多出用到，所有需要采用vuex，这样更方便。。。每个页面在离开之前，保留查询条件在vuex中，从详情页回来的时候，再把查询条件给赋值到input中
vuex中的写法：这个项目中的vuex是一个modules，在modules中新建文件。
https://img-blog.csdnimg.cn/12b3a283b7c5440298668ea5666a27ff.png
引入到index中注册全局的store
https://img-blog.csdnimg.cn/82f1ed637e054111ad9de76eefe7fbea.png
列表中这样写：
1.点击查询的时候，设置isFilters为ture，
2.根据查询的条件，点击查看的时候，触发vuex的存储事件，存查询的参数到vuex。
3.从详情返回列表的时候，把vuex中的参数给赋值到列表上的查询条件框中。
4.在列表页上，加上一个混入的方法。
5.点击重置的时候，清空vuex中的值。
https://img-blog.csdnimg.cn/0dd620c4e5764bd8bce8826e2b91db9d.png
https://img-blog.csdnimg.cn/94f831a428834bb78bd5cd63dfeb17df.png
混入的代码如下：（单独的文件）
// 用来判断是否是从详细页过来的路径
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中的过滤条件
https://img-blog.csdnimg.cn/7e62d51805da40cd947d3c586b606dd5.png
注意点：
https://img-blog.csdnimg.cn/e33e511550af428da6dc5e60e35de771.png
这个地方要注意的点：
1.vuex中的changeFilter的值，我的项目中隐藏的很深。不太好找，需要在调试的时候细心查找。
2. created会在next（）之前执行。所以要想获取到筛选数据，必须得在这里进行数据的初始化操作。不然在created中初始化，此时的查询条件的筛选数据还没获取到。
原来的代码中，详情页面还是要写一下。
https://img-blog.csdnimg.cn/925748661855494fab3c8a6adf8b10bb.png
但是太麻烦了，于是同事提供了mixins的方式，就方便了很多。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]