网站LOGO
白雾茫茫丶
页面加载中
7月21日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    约定式路由生成神器:vite-plugin-pages
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    约定式路由生成神器:vite-plugin-pages

    谢明伟 · 原创 ·
    前端开发实用工具 · ReactViteVue
    共 3272 字 · 约 2 分钟 · 758
    本文最后更新于2024年03月18日,已经过了125天没有更新,若内容或图片失效,请留言反馈

    前言

    去年我发布了一篇关于 约定式路由 的文章:

    在 vite 中使用 glob 实现约定式路由 - 掘金
    什么是约定式路由?约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。 Vue.js,Vite 头像佚名

    文章主要写了关于在 Vite 中使用 glob 根据文件系统自动生成路由,但看到有伙伴介绍这个目前有现成的 vite 插件:vite-plugin-pages

    我一时就来了兴趣,搭建了个 vite 工程了解了下,真的可以,而且配置很简单,下面我来介绍一下这个插件的使用

    安装插件

    1. 使用命令搭建一个 vue3 工程:

      powershell 代码:
      pnpm create vite vue3-demo -- --template vue-ts
    2. 安装 vue-routervite-plugin-pages

      powershell 代码:
      pnpm add vue-router
      
      pnpm add vite-plugin-pages -D

    配置插件

    1. 打开 vite.config.ts 文件,新增配置:

      ts 代码:
       import { defineConfig } from 'vite'
       import vue from '@vitejs/plugin-vue'
       import pages from 'vite-plugin-pages'
      
       // https://vitejs.dev/config/
       export default defineConfig({
      plugins: [
       vue(),
       pages({
         dirs: "src/views", // 需要生成路由的文件目录,默认就是识别src下面的pages文件
         exclude: ["**/components/*.vue"], // 排除在外的目录,上面配置目录的例子,里面有 components 目录,我们不希望他被解析为路由
         extendRoute(route, parent) {
           if (route.path === '/') {
             //给默认路由加一个redirect,默认为index.vue
             return {
               ...route,
               redirect: '/about'
             }
           }
         }
       }),
      ]
       })
    2. 配置 router/index.ts 路由文件:

      ts 代码:
      import {
        createRouter,
        createWebHistory
      } from "vue-router";
      import routes from "~pages";
      const router = createRouter({
        history: createWebHistory(),
        routes,
      });
      export default router;
    3. main.ts 中挂载路由:

      ts 代码:
      import { createApp } from 'vue'
      import './style.css'
      import App from './App.vue'
      import router from './router'
      
      createApp(App).use(router).mount('#app')

    文件系统即是路由

    1. 我们简单创建几个菜单文件:
    2. 我们在 router/index.ts 打印一下 routes ,会得到默认的路由配置,这时候我们就可以访问路由了:
    3. 如果我们想覆盖 route 配置,可以在文件中添加 路由信息:

      vue 代码:
      <route>
       {
      name:'new-about',
      meta: {
       requiresAuth: false,
       layout:'top'
      }
       }
      </route>

      里面的配置会直接覆盖默认配置,你也可以使用 yaml 格式:

      yaml 代码:
      <route lang="yaml">
      name: new-about
      meta:
        requiresAuth: true
        layout: top
      </route>
    4. 配置动态路由,只需要用 [] 符号包裹:

      txt 代码:
      src/pages/users/[id].vue -> /users/:id (/users/one)
      src/pages/[user]/settings.vue -> /:user/settings (/one/settings)
    5. 配置 404 拦截页面,在 src/views 目录下添加 [...all].vue

    路由生成规则

    txt 代码:
    src/views/index.vue -> /
    src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由(children)
    src/views/father/index.vue -> /father
    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页面

    更多配置请参考:vite-plugin-pages

    总结

    个人感觉这个插件功能还是挺实用的,可以用在我们的项目上,就不用每次都要手写路由配置了,也更加容易维护。

    不得不感叹现在前端开发的工具真的是越来越多了,也越来越实用,vite 还有很多实用的功能待我们去探索,这里给作者和 尤雨溪 老板一个赞👍🏻🫰

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 一天前 在线

    🕛

    本站已运行 2 年 202 天 3 小时 52 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事