vue3环境中router文件下index.js的配置
时间: 2024-05-04 10:21:19 浏览: 11
在 Vue 3 中使用 Vue Router,需要先安装 vue-router 包:
```
npm install vue-router@4.0.0-beta.13
```
然后在 `src/router` 目录下新建 `index.js` 文件,在该文件中进行路由的配置。以下是一个简单的示例:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
以上代码中,首先导入了 `createRouter` 和 `createWebHistory` 方法。其中,`createRouter` 方法用于创建一个路由实例,`createWebHistory` 方法用于配置路由的模式,这里使用的是 HTML5 History 模式。
接着,定义了两个路由,分别对应 `/` 和 `/about` 路径,对应的组件分别是 `Home` 和 `About`。
最后,创建路由实例并导出,该实例包含了路由的配置信息,可以在 `main.js` 文件中使用该实例挂载到 Vue 实例上。
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
```
上述代码中,使用 `createApp` 方法创建了一个 Vue 实例,并通过 `.use()` 方法将路由实例挂载到该实例上,在 `App.vue` 组件中就可以使用 `<router-view>` 标签显示对应的组件了。