Skip to content

Nuxt3 的视图系统

Nuxt 提供了几种组件层的方式来构建用户页面。

app.vue

app.vueNuxt 默认情况下的页面入口。

页面路由

基于文件的路由是 Nuxt 的特性之一。当 pages/ 目录下有 .vue 文件时,Nuxt 会自动引入 vue-router 并且根据文件名称自动生成路由。文件路由系统通过命名约定来创建动态或嵌套路由。

pages/
--| about.vue
--| index.vue
--| posts/
----| [id].vue

会生成路由:

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

页面布局

Released under the MIT License.