z_mango 2021-03-18 04:31 采纳率: 66.7%
浏览 436
已采纳

this.$router.beforeEach为什么每执行一次就会叠加一次?

业务场景:A公告列表页,B公告详情页,

要求点击A公告标题进B公告详情页,从B详情页再返回A,要求列表页不更新

我的办法是this.$router.beforeEach获取路由,只要路由不是从B详情页返回的,A公告的列表页就会进行请求刷新

但是:不知道为什么我每次从A到B,再从B返回,反复操作,每点击一次,beforeEach就会叠加一次(如果是从其它页面进入A公告列表页也是会叠加,如果反复了5次,那么第5次进入列表页时,就会发送5次更新请求)

 created() {
    this.$router.beforeEach((to, from, next) => {
      console.log(from.name);
      //如果来自详情页就不发送请求
      if (from.name != "NoticeDetail" && from.name != "Notice") {
        this.$api
          .getNotice({ date: new Date(), limit: 10, isloadelater: true })
          .then((res) => {
            console.log("执行了created---AXIOS调用");
            this.skeletonLoading = false;
            this.initNoticeList(res.data.data.messages);
            this.endDate = this.NoticeList[this.NoticeList.length - 1].SubDate;
          })
          .catch((e) => {
            console.log(e);
          });
      }
      next();
    }),
}

我的问题是:

1、为什么会叠加,我怎么解决呢?

2、我想获得是哪个页面跳转过来的,用this.$router.beforeEach是否合理,有其它更优的方法吗?

3、详情页返回不刷新标题列表页,从其它页面进入标题列表页需要刷新,有其它更好的方案吗?

展开全部

  • 写回答

4条回答 默认 最新

  • 射手座男人 2021-03-18 06:24
    关注

    beforeRouteEnter 结合 keep-alive 去实现

    // 你的router-view 文件中
    
    <keep-alive>
                <router-view :key="$route.path" v-if="this.$route.meta.keepAlive"></router-view>
              </keep-alive>
              <router-view :key="$route.path" v-if="!this.$route.meta.keepAlive"></router-view>
    // 列表页
    
    created() {},
    beforeRouteEnter(to,from,next) {
       if (to.path === '详情页' || from.path === '详情页') {
           to.meta.keepAlive = true
       } else {
         // 其他页进来的 不缓存
       }
    }

    具体的你在看看 差不多就是这个意思

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 MATLAB解决问题
  • ¥20 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目