vue不同版本缓存页面

1.如果需要缓存界面时，可以使用keep-alive实现，通过路由中name进行匹配，同时将组件名称声明在组件内。（注意：在vue3.3版本以下需要显示声明，3.3以后会自动将组件名称作为name）

home.vue
<router-view v-slot="{ Component,route }">
 <keep-alive
    include="OrderView,OrderDetail">
     <component :is="Component" :key="route.name"/>
  </keep-alive>
</router-view>

router.js
{
        path: ROUTE_ORDER,
        name: 'OrderView',
        component: () => import("@/view/order/OrderView.vue"),
        meta: {
            title: "订单管理",
            affix: true,
        }
    }

OrderView.vue  vue version 3.2.13
defineOptions({
  name:"OrderView"
})

2.vue3.3版本以下 声明组件名称
1.使用 “unplugin-vue-define-options”: “^0.12.8”

• 注意版本太高可能不兼容
• 使用webpack时会报未定义 defineOption此时 将 “defineOption”：“writable” 写入 eslint 的global中

package.json
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      "es6": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {
      "no-unused-vars": "off",
      "no-debugger": "off",
      "no-prototype-builtins": "off"
    },
    "globals": {
      "defineProps": "readonly",
      "defineEmits": "readonly",
      "defineExpose": "readonly",
      "withDefaults": "readonly",
      "defineOptions": "writable"
    }
  },