网站 建设 原则wordpress 用户功能

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>