Question

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

不幸的是，当用户执行类似http://localhost:8080/#/users的操作时，由于创建了Vue实例但API调用尚未准备就绪，因此会导致404。

在创建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仅包含登录和未找到的组件。其他3条路线缺失。

最重要的是：可能是我的方法仍然行不通，因为无论何时用户更改/未登录，Vue实例都必须加载路由。要解决这个问题，我必须以“重新加载” main.js文件。如果是这样，那么这种方法将是不好的。只是一个想法。

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

0 个答案: