Nuxt 嵌套路由

Posted 2023-02-22

【中文标题】Nuxt 嵌套路由

【英文标题】：Nuxt nested routes

【发布时间】：2019-03-13 15:30:23

【问题描述】：

我有一个使用 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，

但这不会发生。当我点击链接时，它会重新打开同一个父页面。

【参考方案1】：

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

【讨论】：

您提供的解决方案非常完美。就连 parent.vue 也保持着原来的路径。

【参考方案2】：

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