Vue3.2动态添加路由的方法

2023-09-16 16:51:39

在Vue3.2中,可以使用router.addRoute()和router.removeRoute()方法来动态管理路由渲染。

下面是一个简单的示例,展示如何动态添加路由:

import { createRouter, createWebHistory } from 'vue-router' // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes: [] }) // 动态添加路由 router.addRoute({ path: '/dynamic-route', component: () => import('./DynamicRoute.vue') })

在这个示例中,我们先创建一个空的路由实例。然后使用router.addRoute()方法来动态添加名为/dynamic-route的路由,它的组件是DynamicRoute.vue。

使用router.removeRoute()方法来动态删除路由同样也是一个可行的解决方案。

注意: 在Vue3.2中,router.addRoutes()方法已经被弃用,改用router.addRoute()方法来支持动态路由渲染。