生活中的Design.

Vite-Plugin-Pages与Keep-Alive

前端 Vue Vite
字数统计: 958阅读时长: 4 min
2022/05/31 Share

Vite-Plugin-Pages与Keep-Alive

vite-plugin-pages是一个Vite插件，用于在Vite中使用基于文件的路由。(Vue3+ Vite项目)

安装

1
npm install -D vite-plugin-pages

配置

1
2
3
4
5
6
7
8
9
//vite.config.js
import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    // ...
    Pages(),
  ],
}

使用

默认在src/pages文件夹下的vue/js文件夹下的文件都会被视为页面，页面的文件名与文件夹名相同，例如：

1
2
src/pages/index.vue
src/pages/about.js

会生成一个路由，如下：

1
2
/
/about

也可以在vite.config.js中配置路由文件夹，例如：

1
2
3
4
5
6
7
8
9
//vite.config.js
import Pages from 'vite-plugin-pages'
export default {
  plugins: [
    Pages({
      dirs: 'src/views',
    }),
  ],
}

也可以配置多个:

1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.js
export default {
  plugins: [
    Pages({
      dirs: [
        { dir: 'src/pages', baseRoute: '' },
        { dir: 'src/features/**/pages', baseRoute: 'features' },
        { dir: 'src/admin/pages', baseRoute: 'admin' },
      ],
    }),
  ],
}

  • extensions配置识别的文件后缀:

    1
    2
    3
    4
    5
    6
    7
    8
    // vite.config.js
    export default {
      plugins: [
        Pages({
          extensions: ['vue', 'ts', 'js'],
        }),
      ],
    }

  • exclude排除某些文件:

    1
    2
    3
    4
    5
    6
    7
    8
    // vite.config.js
    export default {
      plugins: [
        Pages({
          exclude: ['**/components/*.vue'],
        }),
      ],
    }

  • importMode设置导入形式:
    类型:'sync' | 'async' | (filepath: string, pluginOptions: ResolvedOptions) => 'sync' | 'async')
    可以用这个方式更细致地控制路由的加载方式，如果返回'sync'，则使用同步加载，如果返回'async'，则使用异步加载。也可以配置一个方法，这个方法的参数为文件路径，返回值为'sync'或'async'。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// vite.config.js
export default {
  plugins: [
    Pages({
      importMode(filepath, options) {
        // 默认的解析方式
        // for (const page of options.dirs) {
        //   if (page.baseRoute === '' && filepath.startsWith(`/${page.dir}/index`))
        //     return 'sync'
        // }
        // return 'async'

        // about页同步其他异步加载.
        return filepath.includes('about') ? 'sync' : 'async'
      },
    }),
  ],
}

  • routeBlockLang,设置页面的<route>块的语言模式,可选值json5 yaml(默认)

  • routeStyle,路由形式,next(默认),remix,nuxt

  • resolver
    类型: ‘vue’ | ‘react’ | ‘solid’ | PageResolver
    默认: ‘auto detect’

  • extendRoute
    扩展路由的方法,可以在这里为路由添加额外的属性,例如route.meta
    类型: (route: any, parent: any | undefined) => any | void,可以配合路由守卫完成路由权限验证工作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// vite.config.js
export default {
  // ...
  plugins: [
    Pages({
      extendRoute(route, parent) {
        if (route.path === '/') {
          // Index is unauthenticated.
          return route
        }

        // Augment the route with meta that indicates that the route requires authentication.
        return {
          ...route,
          meta: { auth: true },
        }
      },
    }),
  ],
}

  • onRoutesGenerated
    类型:(routes: any[]) => Awaitable<any[] | void>
    在生成的路由之后修改路由信息

  • SFC custom block for Route Data单文件组件中的<route>块:
    可以在vue文件中指定route信息,例如meta
    json/json5:

    1
    2
    3
    4
    5
    6
    7
    8
    <route>
    {
      name: "name-override",
      meta: {
        requiresAuth: false
      }
    }
    </route>

    yaml:

    1
    2
    3
    4
    5
    <route lang="yaml">
    name: name-override
    meta:
      requiresAuth: true
    </route>

路由对应

  • 捕获所有
    src/pages/[...all].vue ->/* (/non-existent-page)

  • index:
    src/pages/index.vue ->/
    src/pages/user/index.vue ->/user

  • 动态路由
    src/pages/user/[id].vue ->/user/:id

  • 嵌套路由

    1
    2
    3
    4
    5
    src/pages/
      ├── users/
      │  ├── [id].vue
      │  └── index.vue
      └── users.vue

    生成路由如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    [
      {
        "path": "/users",
        "component": "/src/pages/users.vue",
        "children": [
          {
            "path": "",
            "component": "/src/pages/users/index.vue",
            "name": "users"
          },
          {
            "path": ":id",
            "component": "/src/pages/users/[id].vue",
            "name": "users-id"
          }
        ]
      }
    ]

与keep-alive,transition一起使用

app.vue

1
2
3
4
5
6
7
8
9
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive>
          <component
            :is="Component"
          />
    </keep-alive>
  </transition>
</router-view>

如果要单独给某个页面指定keep-alive,在app.vue动态设置include即可

1
2
3
4
5
6
7
8
9
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive include=["user","help"]>
          <component
            :is="Component"
          />
    </keep-alive>
  </transition>
</router-view>

原文作者：Apm29

原文链接：https://apm29.github.io/2022/05/31/Vite-Plugin-Pages%E4%B8%8EKeep-Alive/

发表日期：May 31st 2022, 1:12:34 am

更新日期：May 31st 2022, 9:52:24 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. Vite-Plugin-Pages与Keep-Alive
    1. 1.1. 安装
    2. 1.2. 配置
    3. 1.3. 使用
    4. 1.4. 路由对应
    5. 1.5. 与keep-alive,transition一起使用
Total : 44
2022
2021
2020
2019
Android JetPack Tools Linux Flutter Dart Kotlin DataBinding Docker Git Gradle Groovy NPM travisci Fragment Coroutines Shell 前端 nuxtjs Python SheetJS Spring Springboot TravisCI MySQL Vue Vite ORM 算法 javascript SSG SEO
笔记 Git