如何在vue组件中动态的删除路由的子组件或添加路由的子组件吗

Question

如何在vue组件中动态的删除路由的子组件或添加路由的子组件吗
遇到的问题是，在登录页面登录成功后台传过来权限，前端收到权限后，不知道如何去删除或者添加路由了，是子路由

Answer 1

在Vue中可以使用router.addRoutes和router.removeRoute方法来动态添加和删除路由。

// 获取动态添加的路由配置
const routes = [
  {
    path: '/newroute',
    component: () => import('@/views/NewRoute.vue'),
    name: 'New Route'
  }
]

// 动态添加路由
this.$router.addRoutes(routes);


// 删除
// 遍历所有子路由
this.$router.options.routes.forEach(route => {
  if (route.path === '/oldroute') {
    // 找到要删除的路由并删除
    const index = this.$router.options.routes.indexOf(route);
    this.$router.options.routes.splice(index, 1);
    // 更新路由
    this.$router.matcher = new VueRouter({routes: this.$router.options.routes}).matcher;
  }
});