javascript - 具有动态路由和组件的 Vue

Question

尝试构建一个测试应用程序，看看 Vue 是否适合替代我们的 AngularJS 应用程序。同时尝试学习Vue。

用户登录后，我们会获取该用户的一些 Angular 色。基于这些 Angular 色就是菜单的构建方式。

用户1 { Angular 色1、 Angular 色2、 Angular 色3}

理论上

用户2 { Angular 色1， Angular 色3}

因此，Role1 将具有/start/page1 和 page1(组件)的路径以及两个子组件。 与/start/page2 的 Role2 路径相同，page2 上会有组件。

在我知道用户拥有哪些 Angular 色之前，我真的不想构建路由。

我正在使用 quasar-framework.org 并使用滑出菜单。尝试即时创建菜单。看来我需要已经导入的组件？

我可以通过循环 Angular 色并设置菜单列表来构建菜单。

尝试使用 this.$router.addRoutes(newRoute) 动态构建路由； 为此，我需要已经导入该组件。

我猜Quasar 的方式是动态加载组件。

在router.js中

function loadPage (component) {
  return () => import(`../../pages/${component}.vue`)
}

我似乎无法在方法部分使用该函数。

这在 Vue 中可能吗？

Answer 1

看看vue-router lazy loading documentation和 Quasar lazy loading documentation

您无法在方法中执行此操作，但如果用户权限与路由权限不匹配，则组件永远不会加载，这基本上就是您想要的。

示例

  const routes = [
    {
      path: '/some-page-protected',
      component: () => import('pages/SomePage'),
      meta: {role: 'admin'}
    }
  ]

或者

  const SomePage = () => ('pages/SomePage')
  const routes = [
    {
      path: '/some-page-protected',
      component: SomePage,
      meta: {role: 'admin'}
    }
  ]