如何在 Vue2 中实现动态添加路由功能？

在Vue2中实现动态添加路由功能通常通过Vue Router提供的`router.addRoute`方法以及组件的`beforeCreate`生命周期钩子来完成。以下是步骤：

1. 首先，安装Vue Router库：`npm install vue-router`

2. 在主应用文件（如`main.js`）中创建并配置路由器实例：

import Vue from 'vue'
import Router from 'vue-router'

// 其他需要的路由配置
const routes = [
  { path: '/', component: YourComponent }
]

const router = new Router({
  routes
})

export default router

3. 当你需要动态添加路由时，在某个业务模块（比如`yourModule.js`）中：

import router from '@/router' // 引入全局router

export function addDynamicRoute(name, path, component) {
  router.options.routes.push({ 
    name,
    path,
    component // 这里可以是一个加载组件的函数，如async function () { return import('./YourComponent.vue') }
  });
}

// 使用示例
addDynamicRoute('dynamicRoute', '/dynamic/:id', () => import('./DynamicComponent.vue'))

4. 确保在`beforeCreate`生命周期钩子里初始化路由：

// 在需要动态路由的组件内
export default {
  beforeCreate() {
    this.$router.addRoutes([this.dynamicRoute]) // 动态添加路由到已存在的router实例
  },
  // ...
}

5. 使用动态路径时，可以在组件内部通过`this.$route.params.id`访问传入的参数。