title: Vue Router: Load routes based on user role
body: <p>I'd like to use the same route path <code>/dashboard</code> to load slightly different views for my users based on their user role.</p>
  
  <p>Previously, I've loaded in different routes based on the current domain:</p>
  
  <pre><code>import MarketingSiteRoutes from './marketingSiteRoutes'
  import DashboardRoutes from './dashboardRoutes'
  import CampusRoutes from './campusRoutes'
  
  Vue.use(VueRouter)
  
  const host = window.location.host
  const parts = host.split('.')
  
  let routes
  
  if (parts.length === 3) {
    const subdomain = parts[0]
  
    switch (subdomain) {
      case 'dashboard':
        routes = DashboardRoutes
        break
      case 'demo':
        routes = CampusRoutes
        break
      default:
    }
  } else {
    routes = MarketingSiteRoutes
  }
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  
  export default router
  </code></pre>
  
  <p>This approach only relies on subdomain, which is available on creation, so everything can be synchronous. I would have to authenticate the user, load in the correct routes based on their role, and then export the router to initialize the vue app.</p>
  
  <p>Ideally, I could load in <code>...adminRoutes</code>, <code>...parentRoutes</code>, <code>...childRoutes</code> based on the user's role, which could contain all the route definitions for the role.</p>
  
  <p>I'm using Feathers-vuex, but I can't seem to await the user and then export the router. Any way to do this?</p>