动态添加vue路由(vue动态加载路由菜单)

动态添加Vue路由是指在Vue应用运行时根据需要动态添加路由配置，以实现动态加载路由菜单的功能。这样做的好处是可以根据用户权限或其他条件来控制页面的访问权限，提高应用的灵活性和扩展性。

在Vue中，我们可以使用Vue Router来管理路由。我们需要创建一个基本的路由配置文件，例如`router.js`，用于定义应用的初始路由配置。在这个文件中，我们可以定义一个初始的路由数组，包含应用的基本路由信息，例如路由路径、组件等。

// router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
});
export default router;

在上述示例代码中，我们定义了两个基本的路由，分别是首页和关于页面。使用`import()`函数来实现路由的懒加载，这样在页面加载时只会加载当前页面所需的组件，提高了应用的性能。

接下来，我们可以在应用的某个地方动态添加路由。例如，在用户登录成功后，根据用户的权限动态添加路由。我们可以在登录成功的回调函数中，通过调用`router.addRoutes()`方法来动态添加路由。

// Login.vue
export default {
  methods: {
    login() {
      // 用户登录成功后获取到用户权限
      const userPermissions = ['dashboard', 'userManagement'];
      // 根据用户权限生成对应的路由配置
      const dynamicRoutes = generateDynamicRoutes(userPermissions);
      // 动态添加路由
      this.$router.addRoutes(dynamicRoutes);
      // 跳转到首页
      this.$router.push('/');
    }
  }
};

在上述示例代码中，我们假设用户登录成功后获取到了用户的权限信息，然后根据权限信息生成对应的动态路由配置。可以自定义一个函数`generateDynamicRoutes()`来根据用户权限生成动态路由配置。然后，通过调用`$router.addRoutes()`方法来动态添加路由。

需要注意的是，动态添加的路由配置只会在下一次路由跳转时生效，所以在添加路由后，我们需要通过`$router.push()`方法来跳转到首页或其他页面，以使新添加的路由生效。

总结一下，动态添加Vue路由是通过调用`$router.addRoutes()`方法来实现的，可以根据用户权限或其他条件动态生成路由配置。这样做可以实现动态加载路由菜单的功能，提高应用的灵活性和扩展性。