0

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

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

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

理论上

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

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

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

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

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

尝试使用 this.$router.addRoutes(newRoute); 即时构建路线 为此，我需要已经导入组件。

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

在 router.js 中

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

我似乎无法在方法部分使用该功能。

这在Vue中可能吗？

4

1 回答 1

2

看看vue-router懒加载文档和Quasar懒加载文档

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

例子

  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'}
    }
  ]
于 2018-02-27T19:17:12.560 回答