【Nuxt3】项目pages目录的用法介绍

简言

记录下nux3pages目录文件的使用方法。

pages

pages目录是存放项目页面文件的地方，Nuxt 3提供基于文件的路由功能，可在网络应用程序中创建路由。

pages/ 目录中的每个页面文件都代表不同的路由，显示其内容。

建议将其他的业务组件vue文件存放到其他目录，pages只存放路由相关的页面vue文件。

文件路由规则

页面是 Vue 组件，可以使用 Nuxt 支持的任何有效扩展名（默认为 .vue、.js、.jsx、.mjs、.ts 或 .tsx）。

自动导入

Nuxt 会自动为 ~/pages/ 目录中的每个页面创建路由。

例如：

html 复制代码

<template>
  <div>
    <!-- This page correctly has only one single root element -->
    Page content
  </div>
</template>

typescript 复制代码

// https://vuejs.org/guide/extras/render-function.html
export default defineComponent({
  render () {
    return h('h1', 'Index page')
  }
})

nuxt会生成两个路由。

如果你的pages/下的文件返回的不是vue组件实例，也会生成一个文件同名路由，这个路由可以访问，默认显示 NuxtLayout 设置的layout布局文件内容。

子路由

可以使用 <NuxtPage> 显示嵌套路由。

pages/index.vue 文件将映射到应用程序的 / 路由。

如果使用 app.vue，请确保使用 <NuxtPage/> 组件来显示当前页面：

html 复制代码

<template>
  <div>
    <!-- Markup shared across all pages, ex: NavBar -->
    <NuxtPage />
  </div>
</template>

嵌套子路由显示也和app.vue的相似。

例如，创建parent.vue文件，再创建同名parent目录，那么parent目录下文件生成的路由就是parent的子路由 /parent/*

html 复制代码

-| pages/
---| parent/
------| child.vue
---| parent.vue

该文件树将生成这些路由：

typescript 复制代码

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

显示子路由child.vue 组件，必须在 pages/parent.vue 中插入 <NuxtPage> 组件：

typescript 复制代码

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

NuxtPage组件有个page-key属性可以设置当前显示子路由值

动态路由

如果在方括号内放置任何内容，都会变成动态路由参数。您可以在文件名或目录中混合和匹配多个参数，甚至是非动态文本。

例如：

typescript 复制代码

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

路由可以匹配/users-*/*,例如：users-admin/123。

在上面的示例中，您可以通过 $route 对象访问组件中的参数：

html 复制代码

<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

全路由

如果需要一个总括路由，可以使用一个名为 [...slug].vue 的文件来创建。这将匹配该路径下的所有路由。

html 复制代码

<template>
  <p>{{ $route.params.slug }}</p>
</template>

导航到 /hello/world 会出现这样的结果：

html 复制代码

<p>["hello", "world"]</p>

可以当作404路由

路由元数据

有的时候我们想往路由上定义元数据。可以在页面内使用 definePageMeta 宏来实现这一目的，该宏在 <script> 和 <script setup> 中均有效。

html 复制代码

<script setup lang="ts">
definePageMeta({
  title: 'My home page'
})
</script>

这些数据可以在应用程序的其他部分通过 route.meta 对象访问。

html 复制代码

<script setup lang="ts">
const route = useRoute()

console.log(route.meta.title) // My home page
</script>

特殊元数据

你可以自己定义自己的元数据,但使用 definePageMeta 定义的某些元数据有其特殊用途：

alias --- 路由别名。您可以定义页面别名。它们允许你从不同的路径访问同一个页面。页面别名可以是字符串，也可以是字符串数组，如 vue-router 文档中所定义。
keepalive --- 如果您在 definePageMeta 中设置 keepalive: true，Nuxt 将自动用 Vue <KeepAlive> 组件包装您的页面。
key --- 页面路由key值。
layout --- 您可以定义用于渲染路由的布局。可以是 false（禁用任何布局）、字符串或 ref/computed（如果你想以某种方式使其具有反应性）。
layoutTransition and pageTransition --- 布局过渡效果和页面过渡效果。
middleware --- 页面路由中间件。您可以定义中间件，以便在加载此页面前应用。它将与任何匹配的父/子路由中使用的所有其他中间件合并。它可以是一个字符串、一个函数（遵循 global before guard 模式的匿名/内联中间件函数）或一个字符串/函数数组。
name --- 页面路由name.
path --- 路由path。如果您有比文件名更复杂的模式，可以定义路径匹配器。

类型声明

如果要为页面添加自定义元数据，您可能希望以类型安全的方式进行。我们可以增强 definePageMeta 所接受对象的类型：

在index.d.ts声明文件添加

typescript 复制代码

declare module '#app' {
  interface PageMeta {
    pageType?: string
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

路由跳转

vue页面模板上：

使用<NuxtLink> 组件，NuxtLink官网描述。

html 复制代码

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

在js或ts上：

Nuxt 3 允许通过 navigateTo() 实用程序方法进行编程导航。

typescript 复制代码

<script setup lang="ts">
const name = ref('');
const type = ref(1);

function navigate(){
  return navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
  })
}
</script>

客户端专用页面

您可以通过给页面添加 .client.vue 后缀，将其定义为客户端页面。该页面的所有内容都不会在服务器上呈现。

服务器专用页面

您只需给页面添加 .server.vue 后缀，就能将其定义为服务器页面。虽然您可以使用 vue-router 控制的客户端导航功能导航到该页面，但该页面将自动使用服务器组件渲染，这意味着渲染页面所需的代码不会出现在您的客户端捆绑包（client-side bundle）中。

自定义路由

随着应用程序变得越来越大、越来越复杂，您的路由可能需要更大的灵活性。因此，Nuxt 直接公开了路由器、路由和路由器选项，以便以不同方式进行定制。

示例

在根目录创建app目录，再app，目录下创建router.options.ts扩展或覆盖路由。

/app/router.options.ts

typescript 复制代码

import type { RouterConfig } from '@nuxt/schema';
export default <RouterConfig>{
  routes(_routes) {

    return [
      ..._routes,
      {
        name: "A",
        path: '/a',
        component: () => import('~/components/a.vue'),
      },
    ]
  },
}

若不想覆盖，记得把_routes返回。

多个页面目录

默认情况下，所有页面都应放在项目根目录下的一个页面目录中。

不过，您可以使用 Nuxt Layers 对应用程序的页面进行分组：

typescript 复制代码

-| some-app/
---| nuxt.config.ts
---| pages
-----| app-page.vue
-| nuxt.config.ts

typescript 复制代码

// some-app/nuxt.config.ts
export default defineNuxtConfig({
})

typescript 复制代码

export default defineNuxtConfig({
  extends: ['./some-app'],
})

extends的用法感觉有点像monorepo策略

结语

结束了。