nuxt的路由配置在哪里
时间: 2024-10-25 18:18:27 浏览: 21
Nuxt的路由动画效果案例
在 Nuxt.js 中,路由配置主要位于项目的 `nuxt.config.js` 文件中。这个文件是 Nuxt 的核心配置文件,用于全局设置应用的一些基本信息,包括路由相关的配置。你需要在 `routes` 属性下定义你的页面路由,例如:
```javascript
export default {
//...
router: {
middleware: ['auth'], // 可选的中间件配置
routes: [
{ path: '/', component: HomeComponent }, // 首页
{ path: '/about', component: AboutComponent }, // 关于页
{ name: 'product', path: '/products/:productId', component: ProductComponent }, // 商品详情页
],
// 更复杂的动态路由可以使用动态参数、守卫等
},
//...
}
```
在这个配置里,`path` 是URL路径,`component` 是对应的组件。你可以通过名称 (`name`) 跟 `router.push({ name })` 或者 `$route.meta.name` 来导航到指定的页面。
如果你想要对每个页面单独配置,可以在 `pages` 目录下的每个 `.vue` 文件上使用 `<nuxt-link>` 标签来定义路由,Nuxt会自动处理这些链接。
阅读全文