vite中优雅使用vue-router_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)=>{
    let name = path.match(/\/pages(.*)\.vue$/)[1].toLowerCase();
    if(name.substring(name.length - 5) == 'index'){
        name = name.slice(0, -5);//去掉最后的index
    } 
    return {
        path: name === '/home' ? '/': name,
        component: pages[path]
    }
})

export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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