nuxt3 路由相关

普通路由

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

JavaScript 复制代码
-| pages/
---| parent/
------| child.vue
---| parent.vue
JavaScript 复制代码
[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

路由信息

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

JavaScript 复制代码
<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

JavaScript 复制代码
-| pages/
---| users-[group]/
-----| [id].vue

在页面中,可以用params获取

JavaScript 复制代码
<script setup>
  const route = useRoute()
  console.log(route.params.group) // admins
  console.log(route.params.id) // 123
</script>

全覆盖路由

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

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

JavaScript 复制代码
-| pages/
---| users/
-----| [...slug].vue

在页面中,可以用params获取

JavaScript 复制代码
<script setup>
  const route = useRoute()
  console.log(route.params.slug) // 123
</script>

路由重定向

JavaScript 复制代码
<script setup>
definePageMeta({
  redirect: '/home'
})
</script>

自定义路由(vueRouter风格)

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

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

    JavaScript 复制代码
    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. 创建钩子函数

    JavaScript 复制代码
    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'

    JavaScript 复制代码
    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全局守卫

JavaScript 复制代码
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>
```
相关推荐
我是日安1 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫5 分钟前
React学习笔记(一)
前端·react.js
晨米酱6 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧6 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖9 分钟前
手写Promise-什么是Promise
前端·javascript
拜无忧10 分钟前
html,svg,花海扩散效果
前端·css·svg
DevUI团队10 分钟前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
RoyLin11 分钟前
TypeScript设计模式:责任链模式
前端·后端·typescript
一枚前端小能手12 分钟前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
三小河14 分钟前
解决vite环境下调用获取二进制文件流 部分文件报错 (failed)net::ERR_INVALID_HTTP_RESPONSE)
前端