vite中优雅使用vue-router
接触过nuxt框架的小伙伴可能知道,在nuxt中不需要手动的去添加路由表,因为在pages文件夹下定义的文件会自动转换成路由,例如pages/home.vue,即可通过/home去访问该页面。当然在vite中可以利用vite提供的Blob导入,实现nuxt那样一键式创建路由。具体实现如下:创建路由文件router.js:import {createRouter as _createRouter,
·
接触过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
})
}
在main.js中即可引用路由文件:
import { createRouter } from './router.js';
createApp(App).use(createRouter()).mount('#app')
更多推荐
已为社区贡献1条内容
所有评论(0)