一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

解放你的双手,全自动生成路由,支持嵌套路由、路由钩子函数,仅需一个函数

引言

每当我看到前人写的路由文件,我就头大,一页能写上千行路由配置

我受不了了,于是我用 vite 提供的读取文件API,写了个自动生成路由的函数

支持读取 meta.(js | ts) 文件

支持 嵌套路由

实现

如果你只是做普通的单级文件,那么很简单

但是要实现嵌套路由,还是有一定复杂度的

所以这次我就不解说源码,大家可以上 npm 自行查阅

自动生成路由npm链接

安装

npm i @jl-org/vite-auto-route

使用

import { genRoutes } from '@jl-org/vite-auto-route'
import { createRouter, createWebHistory } from 'vue-router'


const routes = genRoute()
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

解放你的双手,全自动生成路由,支持嵌套路由、路由钩子函数,仅需一个函数

仅需一行代码即可使用,甚至有 markdown 的文档

文件规范

/src/views/index.vue作为路由入口

子文件夹可嵌套

meta 必须使用默认导出的方式

根文件夹
|-- src
  |-- views
    |-- index.vue
    |-- meta.(ts | js)
    |-- about
      |-- index.vue
      |-- meta.(ts | js)
      |-- nestFloder
        |-- index.vue
        |-- meta.(ts | js)

如上图示例,因为 vite 的工具,无法使用变量来查找目录

所以你的路由需按照配置写,不能自定义配置

/src/views/下建立你的路由文件吧

/src/views/index.vue,会作为路由的首页

/src/views/about/index.vue,会作为首页的子路由

meta 为可选项

如何传递 meta

在同级目录下,创建一个 meta.ts | meta.js 文件

并默认导出一个对象,该对象包含了所有需要传递的 meta 信息。

如何使用嵌套路由 ?

在一个目录下,创建一个新的文件夹,里面包含 index.vue 文件即可

如果使用路由守卫?

meta.ts | meta.js 文件中,添加一个 beforeEnter 函数即可

beforeEnter 会被自动提取出来

例子

如图,我想没人会写这种变态的嵌套路由吧

解放你的双手,全自动生成路由,支持嵌套路由、路由钩子函数,仅需一个函数

最终会生成如下图的结构,名字我使用的是大驼峰拼接的

解放你的双手,全自动生成路由,支持嵌套路由、路由钩子函数,仅需一个函数

原文链接:https://juejin.cn/post/7325791449664045108 作者:寅时码

(0)
上一篇 2024年1月21日 上午10:31
下一篇 2024年1月21日 上午10:42

相关推荐

发表评论

登录后才能评论