vue使用$router.push()或者$router.go(),重新返回上一页不走生命周期

2023-12-13 11:21:31

是因为在App.vue中,vue路由(router-view)组件使用路由缓存组件(keep-alive)包裹着,导致不重新走生命周期,这样可以提高运行效率,但有时候,我们需要重新加载生命周期刷新数据。

解决方案:

在router-view组件中添加key值,唯一标识;

我建议你可以给指定页面添加随机的指定标识就行,比如,我下面在计算属性中做了判断,当this.$route.name等于‘home’的时候,每次生成的key值都不一样,达到重新走生命周期的效果,其它页面还是走缓存;

<template>
  <div id="app">
    <keep-alive >
      <router-view :key="key"></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  computed:{
    key(){
      if(this.$route.name === 'home'){
        return this.$route.name + Math.random()
      }else{
        return this.$route.name 
      }
    }
  }
};
</script>
<style>
.app{
  display: flex;
}
.el-menu-vertical-demo{
  width: 200px;
  height: 100vh;
}
</style>

文章来源:https://blog.csdn.net/weixin_47586598/article/details/134879513
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。