Nuxt3【路由中间件】middleware

news2024/12/24 11:38:50

路由中间件类似路由守卫,即在导航到特定路由之前运行一段代码

内联路由中间件

在页面中定义的路由中间件,因没有名称,所以也叫匿名路由中间件

definePageMeta({
  middleware: [
    function (to, from) {
      console.log("执行了内联路由中间件", to, from);
    },
  ],
});

命名路由中间件

在 middleware 目录中定义,如 middleware/routerInfo.ts

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("路由信息 from --", from);
  console.log("路由信息 to --", to);
});

在页面中使用

definePageMeta({
  middleware: ["router-info"],
  // 或 middleware: 'router-info'
});

路由中间件的名称会被规范化为 kebab-case 格式:myMiddleware 变成 my-middleware。

全局路由中间件

每次路由更改时都运行

通过添加 .global 后缀实现,如 middleware/routerInfo.global.ts

路由中间件的返回值

照常路由

无返回值时,即按原计划完成路由导航

路由重定向

// 重定向到 /about
return navigateTo('/about')

重定向到给定的路径,并在服务器端发生重定向时设置重定向代码为 301

return navigateTo('/', { redirectCode: 301 })

中断路由

return abortNavigation()
// 中止路由时提供错误消息
return abortNavigation(error)

路由中间件的执行顺序

1. 全局路由中间件

默认按全局路由文件名的字符串顺序

在这里插入图片描述
middleware/my.global.ts 会先执行

若想让 middleware/routerInfo.global.ts 先执行,可在文件名前加数字前缀,如

在这里插入图片描述
注意事项:

在这里插入图片描述

虽然目录中 2.my.global.ts 在上面,但 10.routerInfo.global.ts 会先执行,因为是按文件名的字符串顺序执行,所以个位数需加前缀 0,即 01 ,02

2. 页面中定义的中间件

按数组的顺序

definePageMeta({
  middleware: [
    function (to, from) {
      // 自定义内联中间件
    },
    'demo2',
    'demo1',
  ],
});

即先执行匿名中间件,然后是 demo2,最后是 demo1

路由中间件的执行时机

默认情况下,因是服务器渲染,路由中间件在服务端渲染时会执行一次,在客户端渲染时,又会执行一次!

通过下方代码,可以精确自定义路由中间件的执行时机:

export default defineNuxtRouteMiddleware(to => {
  // 在服务器端跳过中间件
  if (process.server) return
  // 完全在客户端跳过中间件
  if (process.client) return
  // 或仅在初始客户端加载时跳过中间件
  const nuxtApp = useNuxtApp()
  if (process.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
})

动态添加中间件

使用 addRouteMiddleware() 辅助函数手动添加全局或命名的路由中间件,比如在插件中添加。

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-test', () => {
    console.log('这个全局中间件是在插件中添加的,将在每次路由更改时运行')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('这个命名中间件是在插件中添加的,将覆盖同名的任何现有中间件')
  })
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2047040.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[Meachines] [Medium] Popcorn SQLI+Upload File+PAM权限提升

信息收集 IP AddressOpening Ports10.10.10.6TCP:22,80 $ nmap -p- 10.10.10.6 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 5.1p1 Debian 6ubuntu2 (Ubuntu Linux; protocol 2.0) | ssh-hostkey: …

2024新型数字政府综合解决方案(七)

新型数字政府综合解决方案通过集成人工智能、大数据、区块链和云计算技术,创建了一个高度智能化和互联互通的政府服务平台,旨在全面提升行政效率、服务质量和透明度。该平台实现了跨部门的数据整合与实时共享,利用人工智能进行智能决策支持和…

RockerMQ学习

消息中间件以前常用RabbitMQ和ActiveMQ,由于业务需要,后期业务偏向大数据,现着重学习一下RocketMQ(RocketqMQ原理同ctg-mq),后续更新Kafka 一、RocketMQ特性 Kafka特性 (高性能分布式&#xff…

MySQL数据库进阶知识(三)《优化》

学习目标: 一周掌握SQL优化知识 学习内容: 一、插入数据 1.insert优化 批量插入 insert into tb_test values(1,Tom),(2,Cat),(3,Jerry);手动提交事务 start transaction; insert into tb_test values(1,Tom),(2,Cat),(3,Jerry); insert into tb_te…

03 网络编程 TCP传输控制协议

目录 1、TCP基本特征 2、TCP通信流程基本原理 (1)基本原理 (2)TCP通信代码实现 (3)核心API解析 1)地址绑定--bind 2)设置监听-listen 3)等待连接请求-accept-产生一个已连接套接字 4&a…

WSL2与Windows之间的网络互访

文章目录 1.环境2.WSL访问Windows上的服务3.Windows访问WSL上的服务 1.环境 1.宿主机 Windows 10 2.WSL ubuntu 18.04 LTS 3.Windows 10上的 vEthernet (WSL) 已启用 2.WSL访问Windows上的服务 1.防火墙设置 2.查看访问Windows的IP 172.21.112.1, 使用该IP访问Windows上的服务…

玩机进阶教程-----回读 备份 导出分区来制作线刷包 回读分区的写入与否 修改xml脚本

很多工作室需要将修改好的系统导出来制作线刷包。前面分享过很多制作线刷包类的教程。那么一个机型中有很多分区。那些分区回读后要写入。那些分区不需要写入。强写有可能会导致不开机 不进系统的故障。首先要明白。就算机型全分区导出后在写回去 都不一定可以开机进系统。那么…

【JVM】JVM 实战调优指南赋案例(保姆篇)

文章目录 JVM 实战调优指南引言1. JVM基础知识1.1 JVM架构1.2 JVM垃圾回收 2. 垃圾回收调优2.1 垃圾回收日志2.2 GC日志分析2.3 调优策略2.3.1 调整堆大小2.3.2 选择合适的GC算法2.3.3 调整垃圾回收线程 3. 内存管理调优3.1 内存泄漏检测3.2 堆转储分析3.3 内存分配策略 4. 线程…

基于飞桨框架的稀疏计算使用指南

本文作者-是 Yu 欸,华科在读博士生,定期记录并分享所学知识,博客关注者5w。本文将详细介绍如何在 PaddlePaddle 中利用稀疏计算应用稀疏 ResNet,涵盖稀疏数据格式的础知识、如何创建和操作稀疏张量,以及如何开发和训练…

在阿里云上部署 Docker并通过 Docker 安装 Dify

目录 一、在服务器上安装docker和docker compose 1.1 首先关闭防火墙 1.2 安装docker依赖包 1.3 设置阿里云镜像源并安装docker-ce社区版 1.4 开启docker服务并设置开机自启动 1.5 查看docker版本信息 1.6 设置镜像加速 1.7 将docker compose环境复制到系统的bin目录下…

【计算机网络】应用层自定义协议与序列化

记得在上一节我们说过TCP中的读取时需要改进,这节就可以解决读取问题了。 目录 应用层再谈 "协议"网络版计算机方案一方案二 序列化 和 反序列化 重新理解 read、write、recv、send 和 tcp 为什么支持全双工 应用层 再谈 “协议” 我们在UDP与TCP中写的…

力扣高频SQL 50题(基础版)第四十七题之1321.餐馆营业额变化增长

力扣高频SQL 50题(基础版)第四十七题 1321.餐馆营业额变化增长 题目说明 表: Customer ---------------------- | Column Name | Type | ---------------------- | customer_id | int | | name | varchar | | visited_on | date | | amount | …

后端开发刷题 | 排序算法--冒泡排序

描述 有一个长度为7的无序数组,按照从小到大的顺序排序后输出。 输入描述: 数组中的数据 输出描述: 数组中数据排序后输出 示例1: 输入: 13 11 9 7 5 3 1输出: 1 3 5 7 9 11 13 算法思想&#xf…

Type-C PD芯片与OTG功能:边充电边数据同时进行 LDR6028

在科技飞速发展的今天,智能设备已成为我们日常生活中不可或缺的一部分。从智能手机到平板电脑,再到笔记本电脑,这些设备不仅极大地丰富了我们的生活方式,也对充电与数据传输技术提出了更高要求。Type-C PD(Power Deliv…

WPF篇(19)-TabControl控件+TreeView树控件

TabControl控件 TabControl表示包含多个共享相同的空间在屏幕上的项的控件。它也是继承于Selector基类,所以TabControl也只支持单选操作。另外,TabControl的元素只能是TabItem,这个TabItem继承于HeaderedContentControl类,所以Ta…

EE trade:黄金的基础知识点

黄金,这种闪耀着金色光芒的贵金属,自古以来就吸引着人类的目光,并深深地影响着人类文明进程。从古代文明的装饰品到现代社会的投资工具,黄金始终扮演着重要的角色。本文整理了黄金的必备常识、黄金的基础知识点。 一、黄金的独特…

达梦数据库系列—48.DMHS实现Mysql到DM8的同步

目录 DMHS实现Mysql到DM8的同步 1、准备介质 2、安装 3、准备源端Mysql和目标端DM8 软件安装 数据库创建 打开归档 开启附加日志 创建辅助表 Mysql客户端驱动 Mysql端安装ODBC 检查依赖包 创建连接用户 创建测试表 4、同步配置 修改服务配置 Mysql到Dm单向同步…

CVPR2023《DNF: Decouple and Feedback Network for Seeing in the Dark》暗光图像增强论文阅读笔记

相关链接 论文链接 https://openaccess.thecvf.com/content/CVPR2023/papers/Jin_DNF_Decouple_and_Feedback_Network_for_Seeing_in_the_Dark_CVPR_2023_paper.pdf 代码链接 https://github.com/Srameo/DNF 摘要 RAW数据的独特属性在低光照图像增强方面展现出巨大潜力。…

ansible环境搭建

任务背景 公司的服务器越来越多, 维护⼀些简单的事情都会变得很繁琐。⽤ shell脚本来管理少量服务器效率还⾏, 服务器多了之后, shell脚本⽆ 法实现⾼效率运维。这种情况下,我们需要引⼊⾃动化运维⼯具, 对 多台服务器实现⾼效运维。 任务要求 通过管理服务器能够…

nginx核心配置示例

目录 1、nginx location的详细使用 (1)精确匹配 (2)区分大小写 (3)不区分大小写 (4)匹配文件名后缀 2、nginx下的用户认证 3、nginx自定义错误页面 4、自定义错误日志 5、n…