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

您可以使用嵌套路由。 Have a look here

Answer 2

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中得到的东西。

如何在Laravel之类的Vue JS中使用组路由？

2 个答案: