vue3 vite 路由配置
时间: 2023-07-22 09:14:52 浏览: 75
在 Vue 3 + Vite 中,路由配置可以通过 Vue Router 实现。以下是一个简单的路由配置示例:
1. 首先,安装 Vue Router:
```shell
npm install vue-router@next
```
2. 在 main.js(或者你的入口文件)中,引入 Vue Router 并创建路由实例:
```javascript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
```
3. 在 App.vue 中,添加 `<router-view>` 组件用于显示当前路由对应的组件:
```html
<template>
<div>
<router-view></router-view>
</div>
</template>
```
4. 创建 Home.vue 和 About.vue 组件,并在对应的路由配置中指定它们的路径和组件。
这只是一个简单的示例,你可以根据自己的需求进行更复杂的路由配置。更多关于 Vue Router 的详细用法可以参考官方文档:https://next.router.vuejs.org/zh/index.html