nuxt3 路由相关

普通路由

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) // admins
  console.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>
```