Nuxt2怎么才能创建一个 `/` 的子路由
时间: 2023-08-16 20:18:41 浏览: 43
要创建一个 `/` 的子路由,可以使用 Nuxt.js 的动态路由。首先,在 `pages` 目录下创建一个名为 `index.vue` 的文件,这将作为父路由的组件。然后,在 `index.vue` 文件中添加一个子路由的 `<nuxt-child>` 标签,如下所示:
```html
<template>
<div>
<h1>这是父路由的内容</h1>
<nuxt-child />
</div>
</template>
```
接下来,在 `nuxt.config.js` 文件中添加一个动态路由,将 `/` 映射到 `index.vue` 组件:
```js
export default {
// ...
router: {
extendRoutes(routes, resolve) {
routes.push({
path: '/',
component: resolve(__dirname, 'pages/index.vue'),
children: [
// 添加子路由
{
path: 'child',
component: resolve(__dirname, 'pages/child.vue')
}
]
})
}
}
// ...
}
```
现在,你可以在 `pages` 目录下创建一个名为 `child.vue` 的文件,这将作为 `/child` 子路由的组件。通过访问 `/child`,你应该能够看到 `/` 父路由的内容以及 `/child` 子路由的内容。