动态分配组件到路由

Question

是否可以有动态路由？例如;我们收到请求 mywebsite.com/foo-bar 并且路由器检查组件 FooBar 是否存在并分配该组件，如果不存在则分配默认组件 BasePage.

例如：

import * as pages from '../components/pages'

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/:slug',
      component: (!_.isNull(pages[slug]) ? pages[slug] : BasePage,
      props: true
    },
  ]
  ...
});

Answer 1

我没有对此进行测试，但我认为类似这样的方法应该可行。

import * as pages from '../components/pages'

const routes = pages.map(page => {
    return {
        path: `/${page.name}`,
        name: page.name,
        component: page
    }
})

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    ...routes,
    {
        path: '*',
        name: 'Default',
        component: DefaultComponent
    }
  ]
});

动态分配组件到路由

Dynamically assign component to routes

vue.js

vue-router

vuejs2