Question

尝试构建测试应用程序以查看Vue是否适合我们的AngularJS应用程序。试图同时学习Vue。

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

User1 {Role1，Role2，Role3}

理论上

User2 {Role1，Role3}

因此Role1将具有/ start / page1和page1（组件）的路径以及两个子组件。与/ start / page2和page2的Role2路径相同，其中包含组件。

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

我正在使用quasar-framework.org并使用菜单滑出。尝试动态创建菜单。好像我需要已经导入的组件？

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

尝试使用此方法动态构建路由。$ 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'}
    }
  ]

Vue具有动态路线和组件

1 个答案: