Vue 路由器 addRoutes 已弃用，但我想向 Vue 路由器添加路由数组

Posted 2023-02-22

【中文标题】Vue 路由器 addRoutes 已弃用，但我想向 Vue 路由器添加路由数组

【英文标题】：Vue router addRoutes deprecated but I want to add array of routes to Vue router

【发布时间】：2021-05-06 19:02:50

【问题描述】：

这是我的 Main.js。我正在通过 API 调用从数据库中获取路由，但 Vue 路由器版本 4 已弃用 addRoutes 功能。所以现在我一次只能添加一条路线。我不想通过迭代路由/菜单列表来添加路由。请分享您的想法。

new Vue(
    store,
    router,
    render: h => h(App),
    beforeMount() 
      if (this.menuList.length) 
        this.$router.addRoutes(this.menuList);
      
    ,
    computed: 
      ...mapGetters(
        menuList: "menuStore/menuList"
      )
    ,
    
  ).$mount("#app");

【参考方案1】：

要从我的模块添加路由，我使用以下简单代码：

MyRoutes.forEach(function(route)
    router.addRoute(route);
)

旧代码：

router.addRoutes(MyRoutes)

所以你的代码应该是这样的：

this.menuList.forEach(function(route)
  this.$router.addRoute(route)
);

【讨论】：

但是这个菜单列表将包含超过10个菜单项，每个菜单中有超过3个子菜单项。我们该如何处理？