Как использовать групповой маршрут в Vue JS, как Laravel?

Question

Я хочу что-то вроде этого.

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

Я использую vue-router в приложении laravel.

Answer 1

Вложенные маршруты могут вас туда доставить, но я чувствую, что они вам не подойдут. Ваш пример в 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.

Answer 2

Вы можете использовать вложенные маршруты. Посмотрите здесь