微信公众号h5返回上一页不执行生命周期

最新推荐文章于 2025-09-17 21:23:19 发布

原创最新推荐文章于 2025-09-17 21:23:19 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

在微信上打开浏览器时碰到了用户跳转一个页面之后按返回按钮，没有触发初始化的js代码的问题，记录一下解决办法。

1.原生写法：

function pushHistory() {  
  var state = {  
    title: "title",  
    url: "#"  
  };  
  window.history.pushState(state, "title", "#xx");  
}
pushHistory();
window.addEventListener("popstate", function(e) {  
  console.log(e);
  alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
}, false);

2.vue可以使用 keep-alive配合activated

首先，我们需要使用router.meta属性，修改需要缓存的组件路由如下

// keepAlive和isback这两个很重要！

{
path: '/usermanage',

name: 'usermanage',

meta: {
keepAlive: true, //该字段表示该页面需要缓存

isBack: false, //用于判断上一个页面是哪个

title: '人员管理'

},

component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载

},

然后修改需要缓存的组件中的代码(只放重点部分)：

export default {
name: 'currentName',

data() {
return {
isFirstEnter: false, //
}
},

beforeRouteEnter(to, from, next) {
if (from.name == 'nextName') { // 这个name是下一级页面的路由name

to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面

activated() {
if (!this.$route.meta.isBack || this.isFirstEnter) {
this.initData() // 这里许要初始化dada()中的数据

this.getDataFn() // 这里发起数据请求，(之前是放在created或者mounted中，现在只需要放在这里就好了，不需要再在created或者mounted中请求！！)

}

this.$route.meta.isBack = false //请求完后进行初始化

this.isFirstEnter = false;//请求完后进行初始化

},
}