vue3引入文件路由——vite-plugin-pages使用

为什么使用 vite-plugin-pages

在以前，写完vue之后，还需要配置router,如下：

[
{
“path”: “/users”,
“component”: “/src/views/users.vue”,
“children”: [
{
“path”: “”,
“component”: “/src/views/users/index.vue”,
“name”: “users”
},
{
“path”: “:id”,
“component”: “/src/views/users/[id].vue”,
“name”: “users-id”
}
]
}
]

使用 vite-plugin-pages 之后：就可以更高效快捷开发。

只需要在目录写好对应页面，即可自动生成路由,上面的路由对应的文件结构如下。

src/pages/
├── users/
│ ├── [id].vue
│ └── index.vue
└── users.vue

注意： 当然这里使用了 pages ,因为是默认配置,你也可以配置成原来大家更习惯的 views 。

默认情况下，页面是从目录中的 .vue 或者 .js``.ts 文件 导出的 Vue 组件 src/pages 。

您可以通过在应用程序中导入模块来访问生成的路由。

安装

使用命令:

pnpm add -D vite-plugin-pages

这里使用pnpm进行安装，可根据自身实际更换使用yarn,npm等。

配置

在 vite.config.ts 中进行配置

import Pages from ‘vite-plugin-pages’

export default defineConfig(
plugins: [
// …
Pages(),
],
}

在 env.d.ts 中进行配置

// vite-env.d.ts
///

这样就可以正常使用了。

可用配置项

dirs

目录

• 类型：sting | []
• 默认值：“/src/pages”

这里还可以传数组。可以指定前缀，如下：

Pages({
dirs: [
{ dir: ‘src/pages’, baseRoute: ‘’ },
{ dir: ‘src/home/news/**/pages’, baseRoute: ‘news’ },
{ dir: ‘src/admin/pages’, baseRoute: ‘admin’ },
],
}),

对应如下的文件目录：

src/
├── home/
│ └── news/
│ ├── components/
│ └── pages/
├── admin/
│ ├── components/
│ └── pages/
└── pages/

相当于可以自定义跳过一层目录，使路由更简洁。

extensions

后缀

• 类型：[]
• 默认值：[‘vue’, ‘js’]

可定义为：[‘vue’, ‘ts’, ‘js’]

exclude

解析页面时要排除的路径

• 类型：[]
• 默认值：无

上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由，即可进行配置：

exclude: [‘**/components/*.vue’],

importMode

导入模式

• 类型： ‘sync’ | ‘async’ | (filepath: string, pluginOptions: ResolvedOptions) => ‘sync’ | ‘async’)
• 默认：
  顶级索引文件：‘sync’，其他：async。

extendRoute

扩展路由

类型： (route: any, parent: any | undefined) => any | void

一个函数，它接受一个路由并可选地返回一个修改后的路由。这对于使用额外数据（例如路线元数据）扩充您的路线很有用。

Pages ( {
extendRoute ( route , parent ) {
if ( route . path === ‘/’ ) {
// 索引未认证
。return route
}

    // 使用指示路由需要身份验证的 meta 来增加路由
    return  { 
      ... route , 
      meta : {  auth : true  } ,
    } 
  } , 
} ) ,

其他参数可自行了解。

vue页面

<route> 通过将块添加到 SFC将路由元添加到路由。这将在生成后直接添加到路由中，并将覆盖它。

您可以指定要使用的解析器 using ，或使用选项 <route lang="yaml"> 设置默认解析器。

支持的类型: JSON, JSON5, YAML

默认: JSON5

JSON/JSON5:

{ name: "name-override", meta: { requiresAuth: false } } ## YAML:

name: name-override
meta:
requiresAuth: true

附插件地址： https://github.com/hannoeru/vite-plugin-pages