Nuxt2的pages文件夹的index.vue文件,怎么才能拥有一个基于文件系统的 `/` 子路由和另一个/about-us的子路由
时间: 2024-02-17 18:03:11 浏览: 89
如果你想要在 Nuxt2 的 `pages` 文件夹中的 `index.vue` 文件中拥有一个基于文件系统的 `/` 子路由和另一个 `/about-us` 的子路由,你可以在 `index.vue` 文件中使用 Vue Router。你可以在 `index.vue` 文件中添加以下代码:
```html
<template>
<div>
<h1>Home Page</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about-us">About Us</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
<style>
/* Add your styles here */
</style>
<router>
[
{
path: '/',
component: () => import('@/pages/index/_id.vue')
},
{
path: '/about-us',
component: () => import('@/pages/about-us.vue')
}
]
</router>
```
在上面的代码中,我们在 `template` 标签中添加了两个 `router-link` 组件来链接到 `/` 和 `/about-us` 路由。我们也添加了一个 `router-view` 组件来渲染子路由。
然后,我们在 `script` 标签中添加了一个空的 Vue 组件,并在 `router` 标签中定义了两个子路由,一个是基于文件系统的 `/` 子路由,另一个是 `/about-us` 子路由。我们使用 `component` 属性来指定路由的组件。
现在,你可以在 `pages/index` 文件夹中创建一个名为 `_slug.vue` 的文件来创建动态路由。例如,你可以创建一个 `_id.vue` 文件来处理 `/1` 和 `/2` 这样的路由。
希望这可以帮助你在 `pages` 文件夹中的 `index.vue` 文件中拥有基于文件系统的子路由和自定义子路由。
阅读全文