vue-plugin-Pages自动配置路由

vite-plugin-pages

使用

安装

首先先安装依赖。因为模版里自带了 vue-router ，所以不需要再安装。
cnpm add vite-plugin-pages vite-plugin-vue-layouts -D

在 vite.config.js 增加以下配置：
import Pages from 'vite-plugin-pages' export default { plugins: [ Pages({ dirs: 'src/views', // 需要生成路由的文件目录 exclude: ['**/components/*.vue'] // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由 }) ] }

目前只需要配置这 2 个参数就够了，其它还有更多参数可以去 vite-plugin-pages 项目页了解。

接着在页面中引入就可以使用了。

import { createRouter } from 'vue-router' import routes from '~pages' const router = createRouter({ // ... routes })

它能够根据pages文件夹下的文件组织结构自动生成一个路由数组，输入到Vue Router 实例中，文件组件结构决定你的路由层级，每次在pages目录下新增一个.vue文件后，即可自动为你创建路由，无需其他配置！

当然 pages 目录可以替换为你任何想要的目录名称，如views。 除了.vue文件，也支持 markdown 等格式在文件。

目前对 react 的支持尚在实验阶段，当然你也可以访问它的主页来了解更多内容。
除此之外，对于常见的路由方式，它也提供了支持：

基础的路由映射

vue-plugin-pages（后称 VPP ）会自动将pages目录下的文件映射成相同名字的路由：

• src/pages/users.vue -> /users
• src/pages/users/profile.vue -> /users/profile
• src/pages/settings.vue -> /settings

默认索引路由
以 index 命名的文件会自动当做路由的索引页：

• src/pages/index.vue -> /
• src/pages/users/index.vue -> /users</