vue之切换tab栏保留查询条件（vue+elementUI+D2admin）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

有tab栏切换通常都是会直接刷新界面，现在有一个需求就是说当我点击tab切换或者菜单切换的时候，原本写的查询不变。

1、在layout中加入keep-alive,进行缓存

这时候，当你输入查询条件，进行切换的时候，你会发现， 效果达到了。但是如果你够细心，你会发现，如果有联动的界面，从a界面点击一条数据进入b界面，数据不再更新，一直保持着第一次的那条数据。

为什么会这样呢？

原因是vue的生命周期函数mounted、created只有首次进入才会执行，或者你刷新浏览器才会执行一次；之后无论你怎么切换菜单，都不会再执行。

可是，b界面的数据，我们需要在进入的时候，就拿到从a界面传过来的参数，进行赋值，然后调用接口等等。当生命周期失效了，此时该怎么办呢？

2、使用路由钩子函数

 /** 当启用keep-alive后，使用路由钩子函数进行执行 */
  beforeRouteEnter(to, from, next) {
     next(vm=>{//  这里的vm指的就是vue实例，可以用来当做this使用
       // 调用你的方法或者赋值操作
       vm.list = JSON.parse(localStorage.getItem('params')).detail // 赋值
       vm.getList(); // 调用方法
     })
   },

注意在钩子函数中，一切要用到this的，请用vm

此时，问题都解决了。但是如果你足够的细心，那么你很快就会发现：当从a界面点击表格中某一条数据，进入b界面，在b界面输入查询条件，然后点击tab栏切换或者菜单栏切换，a界面的查询条件和b界面的查询条件都不会变化，这种情况就是需求要求的，没问题；但是，你会发现当你在a界面点击其他的数据，进行跳转到b界面时，此时b界面的查询条件还是上次输入的查询条件，需要手动的清空，此时与需求期望不符。

3、解决跳转时数据更新，查询条件不更新的问题

这个时候，我们可以用watch监听来实现

 /** 当启用keep-alive后，使用监听 */
watch:{
// 监听list.id的值是否发生变化，如果变了，就需要还原查询条件
  'list.id':{
    handler(newVal,odVal) {
      console.log(newVal,odVal,'fffffffffffffffff')
      if (newVal != odVal) {
        // 还原到最初的查询条件
      }
    },
    deep: true,
    immediate: true
  }
},

以上是 vue之切换tab栏保留查询条件（vue+elementUI+D2admin） 的全部内容， 来源链接： utcz.com/z/377444.html

回到顶部