解决vue-router 切换tab标签关闭时缓存问题

 更新时间:2020年07月22日 08:45:42   作者:hlvy  
这篇文章主要介绍了解决vue-router 切换tab标签关闭时缓存问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要

 {
  path: 'fundProListG',
  component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve),
  title: '基金首页',
  redirect: 'fundProListG/fundProListG',
  meta: {
  keepAlive: false // 不需要被缓存
  },
  children: [{
  path: 'fundProListG',
  component: resolve => require(['@/pages/product/fundPros/fundProListG.vue'], resolve),
  meta: {
  keepAlive: true // 需要被缓存
  }
  },{
  path: 'fungAdm',
  component: resolve => require(['@/pages/product/fundPros/fungAdm.vue'], resolve),
  meta: {
  keepAlive: true // 需要被缓存
  }
  }]
 },

App.vue (你在哪写的那个<router-view ></router-view>标签就在哪改动)

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

当点关闭标签的时候如果不想当前页面缓存 加上

接着遇到了第一次缓存第二次改为false后打开不缓存了 在关闭标签页面 加上这个

补充知识:解决通过vue-router打开tab页,下次进入还是上次history缓存的界面状态的问题

一、问题描述:

1. 跳转模式:界面A-->界面B(界面A中通过 this.$router.push({name:'组件B名称', params: {参数}}) 通过打开新tab页的方式打开界面B。)

2.关闭界面B,回到界面A

3.再次从A到B时,打开的界面B仍然是上次的状态,哪怕传递的参数不一样。

另:router声明如下

{
 path: 'demo/pageB',
 name: 'pageB',
 component: _import('demo/pageB'),
 meta: {
  requiresAuth: true,
  keepAlive: false, // 不需要被缓存
  title: '界面B'
 }
}
 

二、原因: 详见vue-router官网

三、解决方式:在界面B离开时,销毁组件。代码如下:

// 导航离开该组件的对应路由时调用[可以访问组件实例 `this`]
beforeRouteLeave (to, from, next) {
 // 销毁组件,避免通过vue-router再次进入时,仍是上次的history缓存的状态
 this.$destroy(true)
 next()
}  

更多beforeRouteLeave 详见官网

四、其它解决方式(未成功):

vue-router官网提供了 router.replace(location, onComplete?, onAbort?) 的方式,使得不向 history中新增记录,但是我未尝试成功,具体原因暂不知。

官网描述:

我的写法:

this.$router.replace({name:'组件B名称', params: {参数}}, () => { this.warning('test!') }, () => { this.warning('test!') })   

以上这篇解决vue-router 切换tab标签关闭时缓存问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中关闭eslint的方法分析

    vue中关闭eslint的方法分析

    这篇文章给大家讲述了vue中关闭eslint的方法内容,有需要的读者们可以参考学习下。
    2018-08-08
  • vue中用 async/await 来处理异步操作

    vue中用 async/await 来处理异步操作

    这篇文章主要介绍了vue中用 async/await 来处理异步操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue如何利用axios调用后台api接口

    vue如何利用axios调用后台api接口

    这篇文章主要介绍了vue如何利用axios调用后台api接口问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue读取本地静态文件json的2种方法以及优缺点

    Vue读取本地静态文件json的2种方法以及优缺点

    这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue系列之Element UI表单自定义校验规则

    Vue系列之Element UI表单自定义校验规则

    表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的效性,也可以防止用户因误操作而占用服务器资源,这篇文章主要给大家介绍了关于Vue系列之Element UI表单自定义校验规则的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue.js中的全局错误处理函数errorHandler用法

    Vue.js中的全局错误处理函数errorHandler用法

    这篇文章主要介绍了Vue.js中的全局错误处理函数errorHandler用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue官方文档梳理之全局配置

    Vue官方文档梳理之全局配置

    这篇文章主要介绍了Vue官方文档梳理之全局配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue3中轻松实现switch功能组件的全过程

    vue3中轻松实现switch功能组件的全过程

    这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue基础之ElementUI表格详解

    vue基础之ElementUI表格详解

    这篇文章主要为大家详细介绍了vue的ElementUI表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue中内网/局域网/离线的情况下使用及建立项目方式

    vue中内网/局域网/离线的情况下使用及建立项目方式

    这篇文章主要介绍了vue中内网/局域网/离线的情况下使用及建立项目方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论