使用Vite插件自动生成路由,解放生产力

5,440 阅读3分钟

在之前的开发过程中,如果我们想要在应用上加一个页面,我们除了需要创建这个页面组件之外,还需要在route文件中增加一条路由。那么现在我们可以使用下面两个Vite插件,使我们能够实现路由的自动生成。

  • vite-plugin-pages 可以根据创建的文件自动生成路由
  • vite-plugin-vue-layouts 可以根据不同的组件匹配不同的layout

插件的用法

这两个插件的用法跟vite的其他插件用法一样

  • npm安装这两个插件
  • vite.config.js 中import这两个插件,并在plugin数组中加入这两个插件

vite-plugin-pages的使用方法

如果我们想要使用这个插件完成自动生成路由,那么我们需要遵循一定的规范。

  • 当我们在vite的配置文件中做好配置后,我们在项目的根目录创建一个pages 目录 ,然后创建一个index.vue 组件,然后启动项目。这个项目的根路由对应的组件就是这个组件。如果你的组件是写在文件夹里面的,那么这个组件的路由就是/文件名/组件名

  • 在vue-router中,我们还可能有一种用法,就是在路由的路径上有一个参数,比如/demo:name 不同的name复用同一个组件,但是组件的内容不同,如果想要自动生成这种类型的路由,就需要把这个组件命名为[name].vue 然后在组件中使用defineProps 接收name这个参数。

  • 如果我们想要创建一个404页面,路由匹配不上用户访问的路径,就展示这个页面,那么我们就创建一个组件命名为[...xxx].vue 省略号后面的文字京被用来命名路由,并作为传递路由参数的名称。最终形成的路由路径像这样**path**: "/:xxx(.*)*"

  • 生成这个routes数组后,我们依然要创建路由,具体代码如下所示,大家自行体会

    import generatedRoutes from 'virtual:generated-pages'
    import { setupLayouts } from 'virtual:generated-layouts'
    import { createRouter, createWebHashHistory } from 'vue-router'
    
    export const routes = setupLayouts(generatedRoutes)
    console.log(routes)
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes,
    })
    
    export default router
    

    对于代码中的setupLayouts 下面会讲到

  • 完成上面的内容后,pages目录下所有的vue组件都会变成路由,但是其实是很没有必要的,比如我们可能有许多的components并不需要它生成一个路由。那么我们可以在vite.config.js文件中给这个插件做一些配置。

    Pages({
    	//将什么样的文件转换成路由
            extensions: ['vue'],
    	//哪个文件夹里的vue文件不需要转换成路由
            exclude: ["**/components/*.vue"],
    	//接收一个路由,修改并返回修改后的路由
    	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 },
            };
          }),
    
  • 怎么给自动生成的路由添加meta属性。我们可以在组件中使用一对route 标签。代码如下,自行体会。这个标签在vue组件中跟template 标签同级

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

image.png

vite-plugin-vue-layous的用法

创建一个layouts文件夹,然后创建一个default.vue 就可以了。启动项目的布局就是这个组件里的内容。

当然我们也可以创建多个layout,然后在组件中指定layout。具体做法如下所示。插件会自动判断我们路由的meta中是否有layout字段。

<route lang="yaml">
meta:
  layout:404
</route>