普通路由

Nuxt没有router.js，会自动为 ~/pages/ 目录中的每个页面创建一个路由

如

-| 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'}]}
]

路由信息

想为路由中添加信息，可使用以下方法

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

注：definePageMeta方法中除了validate、redirect、name、path、alias、pageTransition、layoutTransition、key、keepalive、layout、middleware、scrollToTop以外的字段都会被放入route.meta中

动态路由

下边页面结构生成的路由是/users-{group}/{id}，如/users-admins/123

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

在页面中，可以用params获取

<script setup>const route = useRoute()console.log(route.params.group) // adminsconsole.log(route.params.id) // 123
</script>

全覆盖路由

[...slug].vue会匹配该路径下的所有路由

下边页面结构生成的路由是/users/{slug}，如/users/123

-| pages/
---| users/
-----| [...slug].vue

在页面中，可以用params获取

<script setup>const route = useRoute()console.log(route.params.slug) // 123
</script>

路由重定向

<script setup>
definePageMeta({redirect: '/home'
})
</script>

自定义路由（vueRouter风格）

Nuxt 3提供了 pages:extend 钩子，允许完全更改Nuxt自动生成的路由，我们可以通过该钩子实现vue-router路由方案（适合老项目迁移，并不是很推荐这样用）

1. 首先创建router/index.ts文件

   import type { NuxtPage } from "nuxt/schema";
   import routerList from "./module/index";
   const path = require("path");const childrenRouter: NuxtPage[] = [{path: "",name: "home",file: path.resolve("pages/home/index.vue"),meta: {aaa: 'aaa',bbb: 'bbb',}},...
   ]
   export default router;
   

2. 创建钩子函数

   import router from "./router/index";
   export default defineNuxtConfig({hooks: {"pages:extend": (routes) => {// 清空Nuxt.js自动生成的路由routes.splice(0);// // 重新将自定义路由配置设置进去routes.push(...(router as NuxtPage[]));},},
   })
   

路由钩子

推荐使用middleware实现路由钩子，如果不想使用，plugins+useRouter().beforeEach也可以模拟出同样的效果

middleware

路由钩子实际是通过middleware实现的

1. 创建中间件文件夹middleware（和pages同级）

2. 在middleware文件夹中创建文件’xxx.ts’

   export default defineNuxtRouteMiddleware(async (to, from) => {if (process.server) {...}; // 服务端执行的操作if (process.client) {...}; // 客户端执行的操作...if (to.name === 'home') return navigateTo('/index');return;
   })
   

   middleware默认在服务器和浏览器中都会执行一遍

   if (process.server) {...} 服务器中执行
   if (process.client) {...} 浏览器中执行

   abortNavigation() 阻止导航继续前进

   return navigateTo(xxx) 跳转到该路由(注意要return)

plugins+useRouter().beforeEach

通过插件（plugins）注册beforeEach实现

Nuxt提供的useRouter函数（SSR友好）中，可以配置beforeEach，可以通过插件注入的形式来添加beforeEach全局守卫

export default defineNuxtPlugin((nuxtApp) => {const router = useRouter();router.beforeEach(async (to, from, next) => {if (process.server) {...}; // 服务端执行的操作if (process.client) {...}; // 客户端执行的操作...next()}
})

全局钩子

如果文件名中带有“.global.”，则该文件为**全局中间件**，如“xxx.global.ts”

局部钩子

1. 全局中间件创建后会自动执行2. 非全局中间件，需要在对应的页面中注册才可使用```Plain Text
<script setup lang="ts">definePageMeta({middleware: ["auth"] // middleware->auth.ts})
</script>
```