vue3动态添加路由的方法

在Vue3中，动态添加路由的方法与Vue2中基本相同，都是使用`router.addRoutes()`方法。具体步骤如下：

1. 在router/index.js中引入需要动态添加的路由组件

const dynamicRoutes = [
  {
    path: '/dynamic',
    name: 'Dynamic',
    component: () => import('@/views/Dynamic.vue')
  }
]

2. 在需要动态添加路由的地方调用`router.addRoutes()`方法

import { createRouter } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.addRoutes(dynamicRoutes)

export default router

需要注意的是，`router.addRoutes()`方法必须在路由实例化之后调用，否则会报错。

相关问题

vue如何动态添加路由配置

在Vue中，可以通过Vue Router动态添加路由配置。具体步骤如下：

1. 导入Vue Router并创建一个路由实例：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: []
})

2. 定义一个路由配置对象，包括路由路径、组件等信息：

const dynamicRoute = {
  path: '/dynamic',
  component: () => import('@/views/Dynamic.vue')
}

3. 在需要动态添加路由配置的地方，使用`router.addRoutes()`方法将路由配置对象添加到路由实例的`routes`数组中：

router.addRoutes([dynamicRoute])

这样，就可以动态添加路由配置了。注意，动态添加的路由配置只有在调用`addRoutes()`方法后才能生效，所以需要在添加路由配置后刷新一下页面才能看到新的路由。