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>