本文主要是介绍Nuxt3【文件路由】pages 详解（含Nuxt3中的路由管理），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Nuxt 会基于 pages 中的文件自动创建路由
pages 目录是可选的，如果不存在该目录，Nuxt 将不会包含 vue-router 依赖。
启用文件路由
将 app.vue 修改为
<template><div><NuxtLayout><NuxtPage/></NuxtLayout></div>
</template>
NuxtPage 是 Nuxt 的内置组件，会根据路由渲染 pages 文件夹中对应的页面
由于 <NuxtPage> 内部使用了 Vue 的 <Suspense> 组件，不能被设置为根元素！
定义页面文件
在 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
路由验证
每个要验证的页面中的definePageMeta()的validate属性提供路由验证。
pages/posts/[id].vue
<script setup lang="ts">
definePageMeta({validate: async (route) => {// 检查id是否由数字组成return /^\d+$/.test(route.params.id)}
})
</script>
获取路由信息 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}
})
路由中间件（路由守卫）
https://blog.csdn.net/weixin_41192489/article/details/141266483
这篇关于Nuxt3【文件路由】pages 详解（含Nuxt3中的路由管理）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
