vue.js - vite怎么自动生成路由？

Question

新建一个vue文件就自动创建向对应文件名的路由

Answer 1

vite不会自动生成路由，nuxt可以根据pages里面的文件自动生成路由，可以试试nuxt

Answer 2

Vite 本身不会自动生成路由。Vite 是一个基于 ES 模块的构建工具，用于开发 Vue.js 和 React 等前端应用。它提供了一种快速、轻量级的开发环境，但并不直接提供路由生成功能。

如果你想在 Vue 项目中自动生成路由，你可以使用 Vue Router 的动态路由功能。动态路由可以根据你的组件文件名自动生成路由。

以下是一个简单的示例，演示如何使用 Vue Router 动态生成路由：

1. 首先，确保你已经安装了 Vue Router：

npm install vue-router

2. 在你的 Vue 项目中创建一个新的文件 router.js 或者 index.js，并引入 Vue 和 Vue Router：

import { createRouter, createWebHistory } from 'vue-router';import Vue from 'vue';// 导入你的组件文件import Home from './components/Home.vue';import About from './components/About.vue';const routes = [  { path: '/', component: Home },  { path: '/about', component: About }];const router = createRouter({  history: createWebHistory(),  routes,});Vue.use(router);

3. 在你的主文件（通常是 main.js 或者 main.ts）中引入并使用路由：

import { createApp } from 'vue';import App from './App.vue';import router from './router'; // 引入你刚刚创建的路由文件const app = createApp(App);app.use(router); // 使用路由插件app.mount('#app'); // 将应用挂载到 id 为 'app' 的元素上

现在，当你创建新的 Vue 组件文件时，你可以按照约定将它们放在一个特定的文件夹中（例如 components），并按照相应的路由路径来命名它们。例如，如果你在 components 文件夹中创建一个名为 UserProfile.vue 的文件，那么你可以在路由配置中自动生成一个路径为 /user-profile 的路由。