Vue3＋Vite创造路由

webpack和vite的vue-router添加路由有所不同，小编踩坑了

1，先下载vue-router

npm install vue-router@next

2，配置vue-router

需要配注意使用 Vite 的环境变量，在 Vite 中，环境变量需要以 VITE_ 前缀命名。在项目根目录下创建一个 .env 文件，并定义环境变量：

   VITE_BASE_URL=/

然后创建src/router/index.js

import { createRouter, createWebHistory } from "vue-router"; import Home from '@/pages/home/index.vue'; const routes = [ { path: '/', name: 'Home', component: Home }, // 在此添加其他路由 ]; const router = createRouter({ history: createWebHistory(import.meta.env.VITE_BASE_URL), routes }); export default router;

3，mian.js中挂载router：

import { createApp } from 'vue' import './css/style.css' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app')

4，App.vue中使用路由:

<script setup> </script> <template> <router-view></router-view> </template> <style scoped></style>