解决vue $router.go(-1)及浏览器返回主页面,主页面无法刷新

252 阅读1分钟

背景

最近项目中开发,有一个需求大至如下
1:一个门户特面模块,有tab切换,每个切换下对应一个列表
2:其中tabs有一部分列表是A系统的,另一部分需要融合B系统的页面
3:均有查看,查看A系统的跳转A系统对应详情,B查看需要跳转B对应详情
4:B页面的详情有返回功能,使用$router.go(-1)
5:B系统返回,需要A主页面门户全部初始化,现在初次加载后会缓存,再次返回不回初始化(不会走VUE的任何生命周期)

产生原因

vue应用中跳转到外部连接而后在回退到vue应用里面,beforeRouterEnter没有被触发,created、mounted里面也没有执行代码,那就证实有可能页面被缓存了,因此这些钩子没有触发,

解决办法

由于是页面被缓存,及使用DOM页面的pageshow事件来监听,需要刷新的页面监听pageshow `

created () {
    window.addEventListener('pageshow', () => {
        //外链回退到vue应用要执行的代码
    })
},
beforeDestroy() {
    window.removeEventListener('pageshow', () => {
     //外链回退到vue应用要执行的代码
    })
  }

`