Nuxt中的动态嵌套路由

Question

我必须掌握Nuxt中的静态路线和动态路线。

但是，我正在尝试确定是否可以有效地使用无限的嵌套页面。

例如，在诸如WordPress的标准CMS中，我可以定义页面的深层嵌套，例如：

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

我想我可以定义不必要的深度页面结构，例如：

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

...等等。但这并不特别有效或可扩展，并引入了很多重复的代码和维护问题。

是否有更好的方法来实现这一目标？

Answer 1

您可以使用带有“子级”选项的嵌套路由。

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
    }
  ]
})

然后在您的users / router.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
  }
]