Nuxt - 来自 nuxt-child 的非嵌套页面

Question

我有以下结构

categories/_tag/_post

目前在 Nuxt 中是这样的：

/categories.vue
/categories/_tag.vue
/categories/index.vue            (blank file which shows when the /categories page loads)
/categories/_tag/_post.vue

categories 中有一个nuxt-child 组件，因此_tag 页面会在其中加载。

我遇到的问题是 _post 页面也在 categories nuxt-child 内部加载，而不是在它自己的页面上。

我希望像这样加载视图：

Answer 1

您需要使用命名视图。

可以在此处找到示例 https://nuxtjs.org/examples/named-views/

这里的关键在nuxt.config.js中

export default {
  router: {
    extendRoutes (routes, resolve) {
      const indexIndex = routes.findIndex(route => route.name === 'index')
      let index = routes[indexIndex].children.findIndex(route => route.name === 'index-child-id')
      routes[indexIndex].children[index] = {
        ...routes[indexIndex].children[index],
        components: {
          default: routes[indexIndex].children[index].component,
          left: resolve(__dirname, 'components/childLeft.vue')
        },
        chunkNames: {
          left: 'components/childLeft'
        }
      }

      index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}
``