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

最新推荐文章于 2023-06-22 15:27:16 发布

爱吃奶黄包の小脑腐�

最新推荐文章于 2023-06-22 15:27:16 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： js vue

本文链接：https://blog.youkuaiyun.com/Sakura_Codeboy/article/details/113179237

在微信上打开浏览器时碰到了用户跳转一个页面之后按返回按钮，没有触发初始化的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 {
isFirstEnte