解决通过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!') })

转载于:https://www.cnblogs.com/vae860514/p/10951789.html

解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题相关推荐

spa项目开发之vue+elementUi实现tab页
文章目录实现tab页的具体思路: ①当点击左侧导航菜单时 ②操作上侧的tab页时实现子tab页当点击一个菜单栏时,出一个tab 实现tab页的具体思路: ①当点击左侧导航菜单时获取菜单名,把它 ...
Vue+Element实现tab页多页面切换
效果图GIF 源码地址 https://gitee.com/marlife/nav-tags.git 已经上传到Gitee(码云),代码拉下来之后: 1.执行安装命令:npm install 2.执行 ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
Vue Router Tab
介绍 Vue Router Tab 是基于 Vue.js 和 Vue Router 的路由页签组件,用来实现多页签页面的管理. 官网演示包含的功能 ✅ 响应路由变化来打开或切换页签 ✅ 页签过多鼠 ...
easyui中tab页中js脚本无法加载的问题及解决方法
我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...
Vue实现侧边导航栏于Tab页关联
技术栈侧边栏用 Antd tab使用element 效果 <template><div class="main-card"><el-row>& ...
python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
Vue router 模式 hash 和 history
目录 Vue router 基本使用 Vue-router 传参 hash 模式 Vue-router hash history 模式 Vue router 基本使用用 Vue + Vue Rout ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...

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

解决通过vue-router打开tab页，下次进入还是上次history缓存的界面状态的问题相关推荐

最新文章

热门文章