在创建Vue实例之前加载外部路由

Question

我想从外部API加载一些路由。 某些用户可能没有访问模块的权限。 例如，我的导航栏应该只呈现用户可以访问的链接。 因此，我必须在创建的事件中访问这些API路由。

不幸的是，当用户执行类似http：// localhost：8080 /＃/ users之类的操作时，这将导致404，因为Vue实例已创建但API调用尚未就绪。

必须在创建Vue实例之前完成API调用，以添加需要权限的所有路由。 首先我创建了我的默认路由器实例（ router.js ）

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

import SignIn from './views/SignIn.vue';
import NotFound from './views/NotFound.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/signIn',
      component: SignIn,
      meta: { isPublic: true },
    },
    {
      path: '*',
      component: NotFound,
      meta: { isPublic: true },
    },
  ],
});

// router.beforeEach

// router.afterEach

export default router;

到现在为止还挺好。 我的Navbar.vue能够通过过滤模块来访问所有这些模块

<script>
export default {
  computed: {
    navItems: function() {
      return this.$router.options.routes.filter(route => route.meta.isModule)
    }
  },
};
</script>

现在是棘手的部分。 我的main.js需要返工。 首先，我进行API调用以获取所有这些模块路由。 之后，我将这些模块添加到现有路径中。 最后，我创建了Vue实例。

import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store/store';

Vue.config.productionTip = false;

async function intializeInstance() {
  // const navItems = get all the routes from the api => await ...

  const navItems = [ // some fake data
    {
      id: 1,
      title: 'Dashboard',
      url: '/Dashboard',
      icon: 'dashboard',
    },
    {
      id: 2,
      title: 'Users',
      url: '/Users',
      icon: 'person',
    },
    {
      id: 3,
      title: 'Groups',
      url: '/Groups',
      icon: 'group',
    },
  ];

  const navRoutes = [];

  for (const navItem of navItems) {
    const { title, url, icon } = navItem;

    navRoutes.push({
      path: url,
      component: await require(`./views${url}`).default,
      meta: {
        isModule: true,
        moduleTitle: title,
        moduleIcon: icon,
      },
    });
  }

  router.addRoutes(navRoutes);

  new Vue({ // initialize the Vue instance now
    router,
    store,
    render: h => h(App),
  }).$mount('#app');
}

intializeInstance();

当我启动我的应用程序时，我很遗憾地得到一个空页面。 没有抛出错误。

当我调试我的Navbar组件时， this.$router.options.routes只包含this.$router.options.routes和notfound组件。 缺少其他3条路线。

---

最重要的是：可能我的方法无论如何都不会起作用，因为每当用户更改/未登录时，Vue实例都必须加载路由。为了解决这个问题，我必须“重新加载”main.js文件。 如果是这样，这种方法反正会很糟糕。 只是一个想法..