vue3常用插件-vite-plugin-pages

飞熊 • 2023年12月19日下午8:53 • Vue • 阅读 398

使用 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标签中科院对页面的路径进行修改，优先级大于自动生成的路径

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

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页面

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188435.html