vue 实现路由回退不刷新

原理：使用<keep-alive>缓存组件

App.vue 设置

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

router.js 有关配置

[
  {
      path: "list",
      name: "List",
      meta: {
        title: "列表",
        keepAlive: true, // 需要被缓存的页面
      },
      component: () => import("@/views/list.vue"),
   },
   {
      path: "detail",
      name: "Detail",
      meta: {
        title: "详情",
      },
      component: () => import("@/views/detail.vue"),
   },
]

同时配置路由回退时的滚动行为： vue-router 滚动行为

router.js

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果只是这样设置，除了首次进入list列表页刷新，之后再次进入或回退至列表页都不再刷新。

重新梳理逻辑，需要从详情页回退至列表页时不刷新页面，其他页面进入列表页则重新获取数据；则获取跳转的页面，监听beforeRouteLeave，设置路由keepAlive信息。

list.vue 示例

const backWhiteList = ['Detail'];
beforeRouteLeave(to, from, next) {
  if (backWhiteList.includes(to.name)) {
    from.meta.keepAlive = true;
  } else {
    from.meta.keepAlive = false;
  }
  next();
},

---

有关vue的钩子函数

• 不使用 keep-alive 时，
  beforeRouteEnter --> created --> mounted --> destroyed

• 使用 keep-alive 时，
  beforeRouteEnter --> created --> mounted --> activated --> deactivated