基于vuerouter3.6.0写一个addroute
时间: 2023-12-14 19:03:09 浏览: 30
在 Vue Router 3.6.0 中,添加路由可以使用 `router.addRoute()` 方法。该方法接受一个 `RouteRecordRaw` 类型的参数,用于描述新的路由。
以下是一个示例:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 初始路由
{
path: '/',
component: Home,
},
],
});
// 添加新路由
const newRoute = {
path: '/about',
component: About,
};
router.addRoute(newRoute);
```
在上面的示例中,我们首先创建了一个名为 `router` 的路由器,初始路由为一个主页路由。然后,我们通过创建一个新的路由对象 `newRoute`,来描述一个新的路由,它包括路径和组件。最后,我们调用 `router.addRoute()` 方法来添加新的路由。
需要注意的是,`addRoute()` 方法只能在初始化路由之后调用一次,否则会报错。如果需要在运行时动态添加多个路由,可以考虑使用 `router.addRoutes()` 方法,它接受一个 `RouteRecordRaw` 类型的数组参数,用于描述多个路由。
```javascript
// 添加多个新路由
const newRoutes = [
{
path: '/about',
component: About,
},
{
path: '/contact',
component: Contact,
},
];
router.addRoutes(newRoutes);
```