nuxt 设置默认展示的子路由
时间: 2024-11-13 10:20:47 浏览: 8
Nuxt.js之自动路由原理的实现方法
在 Nuxt.js 中,如果你想设置默认展示的子路由,你需要配置 `nuxt.config.js` 文件中的 `router` 对象。具体来说,你可以关注 `routes` 属性,它是一个数组,每个元素代表一个路由。在这里,你可以指定一个 `path` 和 `component` 或者 `page`。
例如,假设你想当用户访问 `/posts` 时,默认显示名为 `PostList.vue` 的组件,你可以这样配置:
```js
export default {
// ...
router: {
routes: [
{
path: '/posts', // 子路由路径
component: 'PostList', // 使用组件名或者导入完整的组件
name: 'post-list', // 可选的别名,用于导航链接
},
// 其他路由配置...
]
}
}
```
如果 `PostList.vue` 是一个页面组件(`.vue` 结构),你应该直接提供完整名称;如果是动态加载的模块,可以使用导入的方式。
阅读全文