在之前的开发过程中,如果我们想要在应用上加一个页面,我们除了需要创建这个页面组件之外,还需要在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>
vite-plugin-vue-layous的用法
创建一个layouts文件夹,然后创建一个default.vue
就可以了。启动项目的布局就是这个组件里的内容。
当然我们也可以创建多个layout,然后在组件中指定layout。具体做法如下所示。插件会自动判断我们路由的meta中是否有layout字段。
<route lang="yaml">
meta:
layout:404
</route>