Nuxt - middleware 路由中间件

官方文档:https://nuxt.com.cn/docs/guide/directory-structure/middleware

目录

  • 1 中间件类别
  • 2 中间件执行顺序
  • 3 内联路由中间件
  • 4 命名路由中间件
  • 5 全局路由中间件

1 中间件类别

  • 内联路由中间件,直接在页面内定义。
  • 命名路由中间件,放置在 middleware/ 目录下,导入在页面中。
  • 全局路由中间件,放置在 middleware/ 目录下,并以 .global 后缀结尾,在每次路由更改时运行。

2 中间件执行顺序

全局路由中间件 =》 内联路由中间件 =》 命名路由中间件

3 内联路由中间件

<script setup lang="ts">
definePageMeta({middleware: [function (to, from) {// 自定义内联中间件},],
});
</script>

4 命名路由中间件

<script setup lang="ts">
definePageMeta({middleware: ['auth'],
});
</script>

middleware/auth.ts:

export default defineNuxtRouteMiddleware((to, from) => {if (to.params.id === '1') {return abortNavigation()}// 在实际应用中,你可能不会将每个路由重定向到 `/`// 但是在重定向之前检查 `to.path` 是很重要的,否则可能会导致无限重定向循环if (to.path !== '/') {return navigateTo('/')}
})

Nuxt 提供了两个全局可用的辅助函数,可以直接从中间件中返回。

  • navigateTo - 重定向到给定的路由
  • abortNavigation - 中止导航,并可选择提供错误消息。

与vue-router的导航守卫不同,中间件不会传递第3个 next() 参数,重定向或取消路由由从中间件返回的值处理。

可能的返回值有:

  • 无 - 不阻止导航,将继续执行下一个中间件函数(如果有的话),或者完成路由导航
  • return navigateTo(‘/’) - 重定向到给定的路径,并在服务器端发生重定向时设置重定向代码为 302 Found
  • return navigateTo(‘/’, { redirectCode: 301 }) - 重定向到给定的路径,并在服务器端发生重定向时设置重定向代码为 301 Moved Permanently
  • return abortNavigation() - 停止当前的导航
  • return abortNavigation(error) - 拒绝当前的导航并提供错误信息

5 全局路由中间件

放置在 middleware/ 目录下,并以 .global 后缀结尾

middleware/
--| analytics.global.ts

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

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

相关文章

es安装错误Exception in thread “main“ java.nio.file.NoSuchFileException解决方案

docker 启动es出现一下错误的解决方案 Exception in thread “main” java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.options Exception in thread "main" java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.op…

香橙派OrangePi AIpro,助力国产AIoT迈向新的台阶!

前言&#xff1a;很高兴受邀CSDN与OrangePi官方组织的测评活动&#xff0c;本次测评是一块基于AI边缘计算的香橙派开发板OrangePi AIpro。这是 香橙派 联合 华为昇腾 合作精心打造的新一代边缘AI计算产品&#xff0c;于2023年12月初发布&#xff0c;提供 8/20TOPS澎湃算力[1]&a…

Java | Leetcode Java题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> levelOrder(TreeNode root) {Queue<TreeNode> queue new LinkedList<>();List<List<Integer>> res new ArrayList<>();if (root ! null) queue.a…

Bean的一些属性信息总结

我们知道&#xff0c;在Spring中&#xff0c;一个Bean可以理解为一个对象&#xff0c;但是二者之间肯定是有区别的&#xff0c;比如一个Bean可以实例化成很多个对象、Bean中可以带有某些描述信息。 学习Bean&#xff0c;能更好地使用Bean。 1、Spring两个核心概念的由来【可忽…

Git和plink

安装git的话首先进入到git官网进行下载Git - Downloading Package (git-scm.com) &#xff0c;点击便会自动进行下载。 安装plink时也是根据自己电脑的版本号选择进行安装&#xff0c;我的是windows的64位&#xff0c;由此选择以上版本进行安装&#xff0c;这一个下载完成之后不…

python lxml安装失败怎么解决

通过pip install lxml 安装lxml多次失败&#xff0c;失败原因总结如下&#xff1a; 1、pip版本未更新 解决方法&#xff1a;通过pip安装时&#xff0c;需保证pip的版本没有问题。 更新方法&#xff1a;在系统框输入&#xff1a;python -m pip install --upgrade pip 2、下载…

oracle 还原被覆盖的视图

1.现在的视图 select to_lob(text) from SYS.DBA_views where view_nameXXX; 2.查旧数据 --as of timestamp to_date(2024-05-28 10:30:00,yyyy-mm-dd hh24:mi:ss) select to_lob(text) from SYS.DBA_views as of timestamp to_date(2024-05-28 10:30:00,yyyy-mm-dd hh24:mi:s…

好消息!DolphinScheduler官网集成LLM模型问答AI kapa.ai

不少小伙伴可能发现了&#xff0c;Apache DolphinScheduler官网最近默默上线了kapa.ai作为LLM的问答AI。 集成kapa.ai之后&#xff0c;社区用户可以点击Apache DolphinScheduler官网首页右下角的「Ask AI」模块&#xff0c;在接下来弹出的问答框输入自己的问题&#xff0c;即可…

python uiautomator2 常用操作

uiautomator2 安装 python uiautomator2 安装及使用-CSDN博客 一&#xff0c; 通过包名可以打开app d.app_start(com.gacne.www) 打开app运行后执行代码&#xff0c;查看app具体信息获取包名 d.info二&#xff0c;执行等待点击 # 160秒内等待xpath定位的出现执行点击 d.xpat…

mysql中单表查询的成本

大家好。我们知道MySQL在执行一个查询时&#xff0c;经常会有多个执行方案&#xff0c;然后从中选取成本最低或者说代价最低的方案去真正的执行查询。今天我们来聊一聊单表查询的成本。 那么到底什么是成本呢&#xff1f;这里我们说的成本或者代价是由两方面组成的&#xff1a…

【踩坑】编译opencv将python (for build) python2.7改为python3

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 出现问题 默认是2.7 解决方案 cmake时候添加&#xff1a; -D PYTHON_DEFAULT_EXECUTABLE$(which python3)

详尽的Ubuntu 24.04 LTS安装指南

Ubuntu安装过程涉及多个步骤&#xff0c;下面是一个详尽的Ubuntu 24.04 LTS安装指南 ### 一、准备工作 **1. 系统要求** * **CPU**&#xff1a;至少2GHz双核处理器。 * **内存**&#xff1a;推荐4GB或以上。 * **硬盘**&#xff1a;建议至少预留25GB可用空间。 * **U盘**&am…

02 Prometheus入门安装教程

02 Prometheus入门安装教程 大家好&#xff0c;我是秋意零。今天分享一篇入门级Prometheus安装教程。 环境准备 三台Linux虚拟机&#xff08;一台也可以&#xff09; 准备Prometheus、相关组件安装包 Prometheus官网下载安装包比较慢&#xff0c;如果没有魔法。可关注公众号…

【UnityUI程序框架】The PureMVC Framework核心你会用吗

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Python | Leetcode Python题解之第105题从前序与中序遍历序列构造二叉树

题目&#xff1a; 题解&#xff1a; class Solution:def buildTree(self, preorder: List[int], inorder: List[int]) -> TreeNode:if not preorder:return Noneroot TreeNode(preorder[0])stack [root]inorderIndex 0for i in range(1, len(preorder)):preorderVal pr…

rxjava BehaviorProcessor特性和使用说明

概念和说明 BehaviorProcessor 的定义 BehaviorProcessor 是 FlowableProcessor 的一个具体实现&#xff0c;它同时具备发布和订阅的能力。它会保存最新的一个事件&#xff0c;并在新订阅者订阅时&#xff0c;立即将该事件发送给新订阅者。 主要特性 缓存最新事件&#xff…

计算机毕业设计python+spark天气预测 天气可视化 天气大数据 空气质量检测 空气质量分析 气象大数据 气象分析 大数据毕业设计 大数据毕设

摘 要 近些年大数据人工智能等技术发展迅速&#xff0c;我国工业正努力从“制造”迈向“智造”实现新跨越。神经网络(NeuronNetwork)是一种计算模型&#xff0c;通过大量数据的学习&#xff0c;来发现数据之间的模式和规律&#xff0c;模仿人脑神经元的工作方式。随着算力的提…

音视频集市应用融合平台方案

音视频应用即有深度又有广度&#xff0c;如何让一个平台拥有更多功能更灵活的拓展能力&#xff0c;从单体模块化&#xff0c;多插件到微服务都有大量的实践。 笔者在实际开发过程也同样面对这些纷繁复杂而又必须共容共通需求的挑战。 在实战开发了大量从服务端到设备端再到浏览…

vos3000外呼系统如何查询授权信息和系统并发

要查询VOS3000外呼系统的授权信息和系统并发情况&#xff0c;您可以按照以下步骤进行&#xff1a; 登录系统管理界面&#xff1a; 使用管理员账号登录VOS3000外呼系统的管理界面。 查找系统信息&#xff1a; 寻找系统信息或授权管理的相关选项或标签。 查询授权信息&#xff…

五篇季度思想汇报

季度思想汇报一 尊敬的党组织&#xff1a; 时光荏苒&#xff0c;转眼间一个季度又过去了。在这一季度里&#xff0c;我经历了许多&#xff0c;也有了不少的感悟和成长。 在工作中&#xff0c;我积极投入&#xff0c;努力提升自己的专业技能&#xff0c;面对各种任务和挑战&am…