侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

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

神兵小将
2022-04-15 / 0 评论 / 0 点赞 / 67 阅读 / 2,722 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

为什么使用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

image-1650033710000

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

配置

vite.config.ts中进行配置

import Pages from 'vite-plugin-pages'

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

env.d.ts中进行配置

// vite-env.d.ts
/// <reference types="vite-plugin-pages/client" />

路由引入

新建router.ts

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

export const router = createRouter({
  history:createWebHistory(),
  routes,
});

main.ts使用

import { router } from './router';

const app = createApp(App)

app.use(router).mount('#app')

这样就可以正常使用了。

可用配置项

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:

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

YAML:

<route lang="yaml">
name: name-override
meta:
  requiresAuth: true
</route>

image-1650037330637

指定404页面不存在

只需要在主目录src/pages下新建文件[...all].vue即可。

注意:这里的文件名必须加上方括号,内容随意指定即可。

例如:

<template>
	<div>
		404
        <p>页面飞走了</p>
	</div>
</template>

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

0

评论区