vue-router 4 配置文件怎么写
时间: 2023-12-12 07:47:33 浏览: 40
在 Vue Router 4 中,你需要创建一个 `router` 实例,并将其传递给 Vue 实例的 `router` 选项。下面是一个示例配置文件:
```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
```
在上面的配置文件中,我们首先从 `vue-router` 中导入了 `createRouter` 和 `createWebHistory` 函数。然后,我们定义了两个路由对象,分别对应于 `/` 和 `/about` 路径。每个路由对象都包含了 `path`、`name` 和 `component` 属性,分别表示路径、名称和组件。
接下来,我们使用 `createRouter` 函数创建了一个 `router` 实例,并将其配置传递给了 `history` 和 `routes` 选项。`createWebHistory` 函数用于创建一个 HTML5 历史记录路由,这是 Vue Router 4 推荐的路由模式。
最后,我们导出了 `router` 对象,以便在 Vue 实例中使用。