vue3 Vue-Router 4.0 路由自动处理

1、

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

function getRoutes() {
    const { routes } = loadRouters();
    /**
     * routes处理部分
     */
    return routes;
}

const router = createRouter({
    history: createWebHashHistory(),
    routes: getRoutes()
})

export default router;

/** 自动化处理view目录下的文件生成为路由 */
function loadRouters() {
    const context = import.meta.globEager("../views/**/*.vue");
    const routes: RouteRecordRaw[] = [];

    Object.keys(context).forEach((key: any) => {
        if (key === "./index.ts") return;
        let name = key.replace(/(\.\.\/views\/|\.vue)/g, '');
        let path = "/" + name.toLowerCase();
        if (name === "Index") path = "/";
        routes.push({
            path: path,
            name: name,
            component: () => import(`../views/${name}.vue`)
        })
    });

    return { context, routes }
}

 

2、

仅为demo，可根据实际项目 使用

 

3、

https://www.jianshu.com/p/2d1b6c28e9ac