Dynami c вложенные маршруты в Nuxt - PullRequest
Новая
       24

Dynami c вложенные маршруты в Nuxt

0 голосов
/ 27 апреля 2020

Мне нужно разобраться со статами c маршрутов и динамическими c маршрутами в Nuxt.

Однако я пытаюсь понять, возможно ли эффективно иметь неограниченное количество вложенных страниц.

Например, в стандартной CMS, такой как Wordpress, я могу определить глубокое гнездо страниц, например: 

*hostname.com/page/other-page/another/yet-another/one-more/final-page*

Полагаю, я мог бы определить излишне глубокую структуру страницы, например: 

- /_level1
   - index.vue
   /_level2
      - index.vue
      / _level3
         - index.vue
         /level4
            -index.vue

... и так далее. Но это не кажется особенно эффективным или масштабируемым и приводит к появлению большого количества дублирующегося кода и проблем с обслуживанием.

Есть ли лучший способ добиться этого?

1 Ответ

0 голосов
/ 27 апреля 2020

Вы можете использовать вложенные маршруты с опцией "children".

https://router.vuejs.org/guide/essentials/nested-routes.html

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

Вы также можете импортировать дочерние маршруты из отдельного файла. 

import UserRoutes from "./users/router.js"


const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: UserRoutes
    }
  ]
})

Тогда в ваших пользователях / роутере. js: 

export default [
  {
    // UserProfile will be rendered inside User's <router-view>
    // when /user/:id/profile is matched
    path: 'profile',
    component: UserProfile
  },
  {
    // UserPosts will be rendered inside User's <router-view>
    // when /user/:id/posts is matched
    path: 'posts',
    component: UserPosts
  }
]
...