vue3+vite实现组件缓存

一、单文件组件中name的设置

1.通过额外的script标签

    <script lang="ts">
        export  default{
            name:  "my-component"
        }
    </script>
    <script lang=``"ts"` `setup>
        /* 业务代码 */`
    </script>

2.通过defineOptions

defineOptions({ inheritAttrs: false, name: 'xxx })

3.通过使用vite插件vite-plugin-vue-setup-extend

(1)安装 npm install vite-plugin-vue-setup-extend

(2)使用

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
    return{
        resolve:{...},
        server: {...},
        ...
        plugins:[vue(),vueSetupExtend()]
        ...
    }
})

4.使用根据文件名自动生成的name属性

二、组件缓存的设置

<router-view v-slot="{ Component }">
      <keep-alive include="FrontHome,xxx,xxx">
        <component :is="Component" />
      </keep-alive>
</router-view>

注意:

1.router key

router-view标签中不能使用key属性,key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。在使用路由缓存组件时,如果在router-view上使用了该属性,则每次进入路由都会重新渲染

2.路由滚动条缓存

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个功能只在支持 history.pushState 的浏览器中可用。

通过vue-router的createRouter方法中配置scrollBehavior选项来实现的

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  strict: false,
    // savedPosition (页面滚动条缓存对象{top: xxx,left:xxx},当且仅当 当前路由使用了组件缓存且popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用才会存在)
  scrollBehavior: (to, from, savedPosition) => {
    // 存在缓存回到固定位置,否则回到页面顶部
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        top: 0,
        left: 0
      }
    }
  }
})