• 欢迎光临~

vue3 Vue-Router 4.0 路由自动处理

开发技术 开发技术 2022-06-23 次浏览

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

 

程序员灯塔
转载请注明原文链接:vue3 Vue-Router 4.0 路由自动处理
喜欢 (0)