Vue 约定式路由（文件路由）

Mark 一下，这可是好东西

配置

文档：https://github.com/hannoeru/vite-plugin-pages

vite.config.ts 文件

Pages({
  pagesDir: [
    { dir: 'src/views', baseRoute: '' },
    // { dir: 'src/features/**/pages', baseRoute: 'features' },
    // { dir: 'src/admin/pages', baseRoute: 'admin' }
  ],
});

router.ts 文件

import { createRouter } from 'vue-router';
import routes from '~pages';

const router = createRouter({
  // ...
  routes,
});

给页面添加元数据

<route>
{
  name: "name-override",
  meta: {
    requiresAuth: false
  }
}
</route>

优化一下页面是否缓存

vue2

<template>
  <!-- vue2.x 配置 -->
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
</template>

vue3

<template>
  <!-- vue3.0 配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

还可以用 keep-alive 的特性

感谢群友 @是判断，我加了判断 提及

<keep-alive include="a">
    <router-view>
        <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
    </router-view>
</keep-alive>

后记

感谢群友 @邻家惊悚美少女 提供更好的方案：https://blog.csdn.net/m0_46309087/article/details/109403655

其他文章

• https://juejin.cn/post/7016585379235135496
• https://www.qiyuandi.com/zhanzhang/zonghe/12819.html
• https://www.jianshu.com/p/0b0222954483
• https://segmentfault.com/a/1190000040068213
• https://juejin.cn/post/6925716428775489549
• https://segmentfault.com/a/1190000023890835
• https://zhgzhg.me/2021/08/01/vue%20keep-alive%20%E5%92%8Cvue-router%20%E6%8E%A7%E5%88%B6%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98/