具有动态路由和组件的 Vue答案

【问题标题】：Vue with dynamic routes and components具有动态路由和组件的 Vue
【发布时间】：2018-08-07 12:36:15
【问题描述】：

尝试构建一个测试应用，看看 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 中可行吗？

【问题讨论】：

标签： javascript vue.js quasar-framework

【解决方案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'}
    }
  ]

【讨论】：