vite vue3 import.meta.glob动态路由

vitenode

已于 2024-03-29 17:17:43 修改

阅读量1.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2024-03-29 17:11:46 首次发布

本文链接：https://blog.csdn.net/qq_37312180/article/details/137151311

在Vite中使用Vue 3，你可以使用import.meta.glob来导入目录下的多个Vue组件，并自动生成路由。以下是一个简单的例子：

router/index.js


// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
 
// 自动导入views目录下的所有.vue文件
const modules = import.meta.glob('/src/views/*.vue');
 
const routes = Object.keys(modules).map((path) => {
  const componentName = path.split('/').pop().split('.')[0];
  return {
    path: `/${componentName=='HomeView'?'/':componentName}`,
    component: modules[`${path}`].default || modules[`${path}`],
  };
});
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});
 
export default router;

App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img al