vue3里边的 new VueRouter 是怎么写
时间: 2023-12-10 10:39:02 浏览: 20
在 Vue 3 中,Vue Router 的使用方式与 Vue 2 有所不同。
首先,你需要安装 Vue Router:
```
npm install vue-router@next
```
然后,在你的代码中,可以这样引入并创建一个新的 `VueRouter` 实例:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
// 导入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
```
在这个例子中,我们使用 `createRouter` 工厂函数来创建一个新的路由实例。传递给 `createRouter` 的参数包括一个 `history` 对象和一个路由配置数组。
`createWebHistory()` 方法会返回一个 `history` 对象,它用于在浏览器历史记录中管理路由。在这个例子中,我们使用 `createWebHistory()` 来创建一个 HTML5 history 模式的路由。
接下来,在 `routes` 数组中,我们定义了两个路由规则,分别对应着 `/` 和 `/about` 这两个地址,以及它们对应的组件。
最后,我们导出 `router` 实例,以便在 Vue 应用中使用它。