vue3 generateRoutes动态路由
时间: 2023-06-22 17:43:28 浏览: 76
在 Vue3 中,我们可以使用 `generateRoutes` 方法来动态生成路由配置。该方法接受一个数组作为参数,数组中的每个元素都表示一个路由配置对象。
例如,我们可以定义一个名为 `getRoutes` 的函数,该函数返回一个数组作为动态路由配置,然后在路由实例中调用 `generateRoutes` 方法来生成路由配置。具体代码如下:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: []
})
function getRoutes() {
// 返回一个数组作为动态路由配置
return [
{
path: '/user/:id',
name: 'User',
component: User
},
{
path: '/post/:id',
name: 'Post',
component: Post
}
]
}
router.addRoute(getRoutes()) // 动态生成路由配置
export default router
```
在上面的代码中,我们首先创建了一个空的路由实例 `router`。然后定义了一个名为 `getRoutes` 的函数,该函数返回一个数组,表示动态路由配置。最后,在路由实例中调用 `addRoute` 方法,并传入 `getRoutes()` 方法的返回值,来动态生成路由配置。
需要注意的是,动态生成的路由配置会被添加到路由实例中的 `routes` 数组中,因此我们在创建路由实例时,需要将 `routes` 数组设置为空数组。