[JavaScript知识库]vite中优雅使用vue-router

接触过nuxt框架的小伙伴可能知道，在nuxt中不需要手动的去添加路由表，因为在pages文件夹下定义的文件会自动转换成路由，例如pages/home.vue，即可通过/home去访问该页面。

当然在vite中可以利用vite提供的Blob导入，实现nuxt那样一键式创建路由。具体实现如下：

创建路由文件router.js：

import {createRouter as _createRouter, createWebHistory} from 'vue-router';

const pages = import.meta.glob('../src/pages/*.vue');

const routes = Object.keys(pages).map((path)=>{
    const name = path.match(/\/pages(.*)\.vue$/)[1].toLowerCase();
    return {
        path: name === '/home' ? '/': name,
        component: pages[path]
    }
})

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}

在main.js中即可引用路由文件：

import { createRouter } from './router.js';
createApp(App).use(createRouter()).mount('#app')

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖