解决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项目优化之按需加载组件-使用webpack require.ensure

    详解vue项目优化之按需加载组件-使用webpack require.ensure

    本篇文章主要介绍了详解vue项目优化之按需加载组件-使用webpack require.ensure,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue3计算属性和异步计算属性方式

    Vue3计算属性和异步计算属性方式

    这篇文章主要介绍了Vue3计算属性和异步计算属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 详解vue-validator(vue验证器)

    详解vue-validator(vue验证器)

    本篇文章主要介绍了vue-validator(vue验证器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Vue项目部署在Spring Boot出现页面空白问题的解决方案

    Vue项目部署在Spring Boot出现页面空白问题的解决方案

    这篇文章主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue3 中的数据侦测的实现

    Vue3 中的数据侦测的实现

    这篇文章主要介绍了Vue3 中的数据侦测的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 深入了解vue中一键复制功能的实现

    深入了解vue中一键复制功能的实现

    在现代的Web应用中,用户体验至关重要,而提供简单易用的复制功能是改善用户体验的一项关键功能,本文将为大家详细介绍Vue实现一键复制功能的具体方法,需要的可以参考下
    2023-11-11
  • vue模板配置与webstorm代码格式规范设置

    vue模板配置与webstorm代码格式规范设置

    这篇文章主要介绍了vue模板配置与webstorm代码格式规范设置详细的相关资料,需要的朋友可以参考一下文章得具体内容,希望对你有所帮助
    2021-10-10
  • vue3中 provide 和 inject 用法及原理

    vue3中 provide 和 inject 用法及原理

    这篇文章主要介绍vue3中 provide 和 inject 用法及原理,provide 和 inject可以 解决多次组件传递数据的问题,下面文章是具体的用法和实现原理,具有一定的参考价值,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • Vue实现带进度条的文件拖动上传功能

    Vue实现带进度条的文件拖动上传功能

    这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue-jsonp的使用及说明

    vue-jsonp的使用及说明

    这篇文章主要介绍了vue-jsonp的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论