vue不同版本缓存页面

幼儿园的小霸王

已于 2024-04-12 09:04:56 修改

阅读量321

点赞数 1

文章标签： vue.js 缓存前端

于 2024-04-12 09:04:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43367987/article/details/137665836

版权

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"
    }
  },