开发问题归纳

清水仙君-小铭

已于 2022-10-26 16:29:35 修改

阅读量122

点赞数

分类专栏： vue webpack 前端文章标签： vue.js webpack

于 2022-10-14 15:52:25 首次发布

本文链接：https://blog.csdn.net/qq_34111969/article/details/127322048

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

vue-cli@5.0.8 keep-alive导致热更新失效

<RouterView v-slot="{ Component, route }">
   <keep-alive>
     <component :is="wrap(route.fullPath, Component)" />
   </keep-alive>
 </RouterView>
 ...
const wrapperMap = new Map();
// 为keep-alive里的component接收的组件包上一层自定义name的壳.
function wrap(wrapperName, component) {
  let wrapper;
  // 重点就是这里，这个组件的名字是完全可控的，
  // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字.
  // 这就能配合 keep-alive 的 include 属性可控地操作缓存.
  if (wrapperMap.has(wrapperName)) {
    wrapper = wrapperMap.get(wrapperName);
  } else {
    wrapper = {
      name: wrapperName,
      render() {
        // return h("div", { className: "vaf-page-wrapper" }, component);
        return h(component);
      },
    };
    wrapperMap.set(wrapperName, wrapper);
  }
  return h(wrapper);
}