Nuxt.js 嵌套路由：页面布局的艺术

2023-10-26 17:59:06

好的，以下是如何使用 Nuxt.js 实现嵌套路由：

Nuxt.js 中的嵌套路由

在 Nuxt.js 中，嵌套路由允许您将路由组织成一个层次结构，从而创建复杂且有组织的页面布局。嵌套路由可以帮助您将应用程序的不同部分分组在一起，并使您的代码更易于维护。

要设置嵌套路由，您需要在 pages 目录中创建一个子目录，然后在该子目录中创建您的路由文件。例如，要创建一个名为 users 的嵌套路由，您可以按照以下步骤操作：

在 pages 目录中创建一个名为 users 的子目录。
在 users 子目录中创建一个名为 index.vue 的文件。
在 index.vue 文件中，添加以下代码：

<template>
  <div>
    <h1>Users</h1>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'Users',
};
</script>

在 nuxt.config.js 文件中，添加以下代码：

export default {
  // ...
  router: {
    routes: [
      {
        path: '/users',
        component: 'pages/users/index.vue',
        children: [
          {
            path: 'profile',
            component: 'pages/users/profile.vue',
          },
          {
            path: 'settings',
            component: 'pages/users/settings.vue',
          },
        ],
      },
    ],
  },
  // ...
};

现在，您就可以在应用程序中使用嵌套路由了。要导航到 users 路由，您可以使用以下 URL：