Nuxt 嵌套路由

Question

我有一个使用 Nuxt 创建的基本通用应用程序。

我是 vue 和 nuxt 的新手，我正在尝试了解路由的工作原理，更具体地说是嵌套路由的工作原理。

所以我的项目结构是

├── parent
│   ├── child1.vue
│   └── child2.vue
├── parent.vue

在父页面中，我有两个 child1 和 child2 的链接

<template>
    <div>
        <h3>Parent page</h3>
        <nuxt-link to="/parent/child1"> about1 page</nuxt-link>
        <nuxt-link to="/parent/child2"> about2 page</nuxt-link>
    </div>
</template>

我的目标是单击链接转到下一页，例如 /parent/child2、

但这并没有发生。当我单击链接时，它会重新打开相同的父页面。

Answer 1

将文件 parent.vue 移动到 parent/index.vue

Answer 2

只是一个小提示，您也可以使用 parent/_slug.vue 作为您的 children

Nuxt 嵌套路由

Nuxt nested routes

routes

nested-routes

vue.js

nuxt.js