vite-plugin-pages
适用场景
使用 vite-plugin-pages 之后:就可以更高效快捷开发。
只需要在目录写好对应页面,即可自动生成路由, 上面的路由对应的文件结构如下。
注意: 当然这里使用了 pages , 因为是默认配置, 你也可以配置成原来大家更习惯的 views 。
实现步骤
1、安装
vite-plugin-pages 依赖vue-router运行因此还需要安装vue-router
npm install -D vite-plugin-pages
npm install vue-router
2、配置-vite.config.js中配置
import Pages from 'vite-plugin-pages'
export default {
plugins: [
// ...
Pages({
dirs: "src/views", // 需要生成路由的文件目录,默认就是识别src下面的pages文件
exclude: ["**/components/*.vue"], // 排除在外的目录,上面配置目录的例子,里面有 components 目录,我们不希望他被解析为路由
extendRoute(route, parent) {
if (route.path === '/') return {
...route,
redirect: 'page1'
} //给默认路由加一个redirect,默认为index.vue
}
}),
],
}
3、配置-router/index.js配置, main.js中正常挂载路由
import {
createRouter,
createWebHistory
} from "vue-router";
import routes from "~pages";
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4、route标签中科院对页面的路径进行修改,优先级大于自动生成的路径
routes.push({
name: "name-override",
meta: {
requiresAuth: false
}
})
5、自动生成vue-router的路由遵循的规则
src/views/index.vue -> /
src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由(children)
src/views/father.vue -> /father
src/views/father/son.vue -> /father/son
src/views/father/[id].vue -> /father/:id
src/views/[father]/son.vue -> /:father/son
src/views/[…all].vue ->文件用来适配404页面