javascript - 如何在laravel之类的vue js中使用组路由？

Question

我想要这样的东西。

Route.group({ prefix: '/blog' }, () => {
    Route.view('/', 'PostIndex');        // '/blog/posts'
    Route.view('/create', 'CreatePost'); // '/blog/posts/create'
    Route.view('/edit', 'EditPost');     // '/blog/posts/edit'
});

我在 laravel 应用程序中使用 vue-router。

Answer 1

Nested routes也许可以带你去那里，但我觉得它们不适合你。您在 Laravel 中的示例仅处理所有路由的前缀，其中嵌套路由将所有子路由包装在父布局中。

您可能只需创建一个简单的函数就可以实现类似的功能:

const routesWithPrefix = (prefix, routes) => {
  return routes.map(route => {
    route.path = `${prefix}${route.path}`

    return route
  })
}

{
  routes: [
    {
      path: 'another-route',
      component: AnotherComponent
    },
    ...routesWithPrefix('/blog', [
      {
        path: '/',
        component: PostIndex
      },
      {
        path: '/create',
        component: CreatePost
      },
      {
        path: '/edit',
        component: EditPost
      }
    ])
  ]
}

我个人只会手动写出前缀，但这更接近于你在 Laravel 中得到的东西。