Nuxt 会基于 pages 中的文件自动创建路由

启用文件路由

在 app.vue 中添加

<NuxtPage />

NuxtPage 是 Nuxt 的内置组件，会根据路由渲染 pages 文件夹中对应的页面

定义页面文件

在 pages 文件夹中定义页面，支持 .vue、.js、.jsx、.mjs、.ts 或 .tsx

  • 注意事项：页面仅能有一个根元素 （HTML 注释也被视为元素）

pages/index.vue

<template>
  <h1>首页</h1>
</template>

pages/index.ts

export default defineComponent({
  render () {
    return h('h1', '首页')
  }
})

pages/index.tsx

export default defineComponent({
  render () {
    return <h1>首页</h1>
  }
})

自动创建路由的规则

  • pages/index.vue 创建路由 /
  • pages/about.vue 创建路由 /about , 即默认情况下，文件路径即其创建的路由

动态路由 []

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

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

导航到 /users-admins/123 将渲染

<p>admins - 123</p>

可选参数 [[]]

/pages/[[slug]]/index.vue 或 /pages/[[slug]].vue 将同时匹配 / 和 /test。

嵌套路由

├─ 📁pages
│  ├─ 📁parent
│  │  └─ 📄child.vue
│  └─ 📄parent.vue

会创建路由

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

在 pages/parent.vue 中需插入 <NuxtPage> 组件才能渲染 child.vue 组件

子路由键

NuxtPage 组件的 pageKey 属性，可以控制组件何时重新渲染

pages/parent.vue 中

<template>
  <div>
    <h1>我是父视图</h1>
    <NuxtPage :page-key="route => route.fullPath" />
  </div>
</template>

或 pages/child.vue 中

<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath
})
</script>

[…slug].vue

匹配路径下的所有路由，常用于定义 404 页面

  • pages/my/[…slug].vue 则匹配 /my 下的所有路由

pages/[…slug].vue

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

导航到 /hello/world 将渲染：

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

页面元数据

为路由定义元数据需使用 definePageMeta 宏实现

<script setup lang="ts">
definePageMeta({
  title: '我的主页'
})
</script>

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

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

console.log(route.meta.title) // 我的主页
</script>

definePageMeta 是一个编译器宏，不能在组件内部引用它。相反，传递给它的元数据将被提升出组件。因此，页面元数据对象不能引用组件（或在组件上定义的值）。但是，它可以引用导入的绑定。

<script setup lang="ts">
import { someData } from '~/utils/example'

const title = ref('')

definePageMeta({
  title,  // 这将导致错误
  someData
})
</script>

特殊元数据

  • name 路由名称
  • alias 路由别名
  • keepalive: true ，则 Nuxt 将自动将你的页面包装在 Vue 的 <KeepAlive> 组件中。若想保留父级路由的状态，请使用<NuxtPage keepalive />, 还可以设置要传递给 <KeepAlive> 的 props
  • key 子路由键
  • layout 布局，可以是 false（禁用任何布局），字符串或 ref/computed
  • layoutTransition 布局过渡
  • pageTransition 页面过渡
  • middleware 路由中间件
  • path 路由匹配器

路由优先级

命名的父级路由将优先于嵌套的动态路由。如/foo/hello 会优先渲染 /pages/foo.vue ，其次才考虑 /pages/foo/[slug].vue

获取路由信息 useRoute()

useRoute() 函数返回的路由对象中有以下信息：

  • fullPath：与当前路由关联的编码URL，包含路径、查询和哈希
  • hash：URL中以#开头的解码哈希部分
  • matched：与当前路由位置匹配的规范化的匹配路由数组
  • meta：附加到记录的自定义数据
  • name：路由记录的唯一名称
  • path：URL中编码的路径名部分
  • redirectedFrom：在到达当前路由位置之前尝试访问的路由位置
  • params：动态路由中的传参
  • query：路由中 ? 后面的传参

pages/[slug].vue

<script setup lang="ts">
const route = useRoute()
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
</script>

路由导航组件 NuxtLink

NuxtLink 是 Nuxt 的内置组件，效果同 RouterLink

<NuxtLink to="/">首页</NuxtLink>

路由跳转方法 navigateTo()

navigateTo({
    path: '/search',
    query: {
      name: name.value,
      type: type.value
    }
})