首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

Nuxt.js 路由管理:useRouter 方法与路由中间件应用

编程知识
2024年07月28日 16:44

title: Nuxt.js 路由管理:useRouter 方法与路由中间件应用
date: 2024/7/28
updated: 2024/7/28
author: cmdragon

excerpt:
摘要:本文介绍了Nuxt 3中useRouter方法及其在路由管理和中间件应用中的功能。内容包括使用useRouter添加、移除路由,获取路由信息,基于History API的操作,导航守卫的实现,如定义匿名、命名及全局中间件,以及使用navigateTo和abortNavigation辅助函数。同时,还涉及Promise和错误处理,最后通过一个示例展示了useRouter的常见用法。

categories:

  • 前端开发

tags:

  • Nuxt.js
  • 路由管理
  • useRouter
  • 中间件
  • 前端开发
  • Vue.js
  • Web开发

image
image

扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

一、Nuxt 中的 useRouter 方法

useRouter 是 Nuxt 3 提供的一个用于处理路由的重要工具。它让您能够在应用中方便地进行各种路由操作。比如添加路由、导航、路由守卫等。

二、基本功能

  1. addRoute():向路由实例添加新的路由。您可以提供 parentName 将新路由添加为现有路由的子路由。 示例:
const router = useRouter();
router.addRoute({ name: 'newRoute', path: '/newPath', component: NewComponent });

  1. removeRoute():根据名称移除现有路由。 示例:
router.removeRoute('newRoute');

  1. getRoutes():获取所有路由记录的完整列表。 示例:
const routes = router.getRoutes();

  1. hasRoute():检查是否存在具有给定名称的路由。 示例:
const hasRoute = router.hasRoute('newRoute');

  1. resolve():返回路由位置的规范化版本,并包含一个 href 属性,其中包含任何现有的基础路径。 示例:
const resolvedRoute = router.resolve({ name: 'newRoute' });

三、基于 History API 的操作

  1. back():如果可能,返回上一页,与 router.go(-1) 相同。 示例:
router.back();

  1. forward():如果可能,前进到下一页,与 router.go(1) 相同。 示例:
router.forward();

  1. go():在历史记录中向前或向后移动,不受 router.back() 和 router.forward() 中施加的层次结构限制。 示例:
router.go(3);  // 向前移动 3 步

  1. push():通过将新条目推入历史堆栈来以编程方式导航到新的 URL。建议使用 navigateTo 代替。 示例:
router.push({ path: "/newUrl" });

  1. replace():通过替换当前路由历史堆栈中的当前条目来以编程方式导航到新的 URL。建议使用 navigateTo 代替。 示例:
router.replace({ hash: "#bio" });

四、导航守卫

定义中间件

  1. 匿名(或内联)中间件

    • 直接在页面的 definePageMeta 方法中定义。
    export default {
      pageMeta: {
        middleware: ['myMiddleware']
      }
    }
    
    
  2. 命名中间件

    • 放置在 middleware/ 目录下,并在页面中通过异步导入自动加载。
    // 在 `middleware/` 目录下创建文件
    export default defineNuxtRouteMiddleware((to, from) => {
      // 中间件逻辑
    })
    
    
  3. 全局中间件

    • 放置在 middleware/ 目录下,并以 .global 后缀结尾。
    // 在 `middleware/` 目录下创建文件
    export default defineNuxtRouteMiddleware((to, from) => {
      // 全局中间件逻辑
    })
    
    

使用辅助函数

Nuxt.js 提供了两个全局可用的辅助函数来处理导航:

  • navigateTo:用于重定向到给定的路由。

    return navigateTo('/new-route')
    
    
  • abortNavigation:用于中止当前的导航。

    return abortNavigation()
    
    

返回值

中间件返回的值决定了导航的行为:

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

示例

假设我们有一个中间件用于检查用户是否登录,如果未登录则重定向到登录页面:

export default defineNuxtRouteMiddleware((to, from) => {
  if (!userIsLoggedIn()) {
    return navigateTo('/login')
  }
})

注意事项

  • 避免无限循环:在重定向之前检查 to.path 是很重要的,否则可能会导致无限重定向循环。
  • 使用辅助函数:推荐使用 navigateTo 和 abortNavigation 辅助函数来执行重定向或停止导航,以确保与 Nuxt.js 的集成和未来的兼容性。
  • 了解变更风险:尽管 navigateTo 和 abortNavigation 辅助函数是推荐使用的,但其他在 vue-router 文档中描述的返回值可能也能工作。然而,未来 Nuxt.js 可能会对这些返回值进行更改,因此使用官方推荐的方法是最安全的。

五、Promise 和错误处理

  1. isReady():返回一个 Promise,在路由完成初始导航时解析。 示例:
const ready = await router.isReady();

  1. onError:添加一个错误处理程序,每次导航期间发生未捕获的错误时都会调用该处理程序。

六、示例应用

以下是一个简单的 Nuxt 3 应用示例,展示了如何使用 useRouter 的一些常见功能:

// pages/index.vue
<template>
  <div>
    <h1>Nuxt 3 Router Demo</h1>
    <button @click="addNewRoute">Add New Route</button>
    <button @click="removeRoute">Remove Route</button>
    <button @click="goToNewUrl">Go to New URL</button>
  </div>
</template>

<script setup>

const addNewRoute = () => {
  router.addRoute({ name: 'newRoute', path: '/newPath', component: () => import('./NewComponent.vue') });
};

const removeRoute = () => {
  router.removeRoute('newRoute');
};

const goToNewUrl = () => {
  router.push({ path: '/newPath' });
};
</script>

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:Nuxt.js 路由管理:useRouter 方法与路由中间件应用 | cmdragon's Blog

往期文章归档:

From:https://www.cnblogs.com/Amd794/p/18328597
本文地址: http://www.shuzixingkong.net/article/524
0评论
提交 加载更多评论
其他文章 Jenkins如何使用CrumbIssuer防御CSRF攻击
1、CSRF(跨站请求伪造)概述 在讲解Jenkins的跨站请求伪造(CSRF)保护机制之前,让我们首先对CSRF这一安全威胁及其重要性进行简明扼要的概述。 1.1 CSRF(跨站请求伪造)的原理 CSRF(即跨站请求伪造)是指利用受害者尚未失效的身份认证信息、(cookie、会话等),诱骗其点击恶
Jenkins如何使用CrumbIssuer防御CSRF攻击 Jenkins如何使用CrumbIssuer防御CSRF攻击 Jenkins如何使用CrumbIssuer防御CSRF攻击
ComfyUI插件:ComfyUI Impact 节点(二)
前言: 学习ComfyUI是一场持久战,而 ComfyUI Impact 是一个庞大的模块节点库,内置许多非常实用且强大的功能节点 ,例如检测器、细节强化器、预览桥、通配符、Hook、图片发送器、图片接收器等等。通过这些节点的组合运用,我们可以实现的工作有很多,例如自动人脸检测和优化修复、区域增强、
ComfyUI插件:ComfyUI Impact 节点(二) ComfyUI插件:ComfyUI Impact 节点(二) ComfyUI插件:ComfyUI Impact 节点(二)
DP进阶合集
(ps:本集合为Star_F总结的dp进阶知识,持续更新~。 转载本文章需要联系我,否则视为侵权!!) 前置知识:线性dp,背包,树形dp,区间dp 内容预览: 状压dp 数位dp dp优化(前缀和,单调队列,斜率优化) 1. 状压dp: 思路:如果题目中 \(n\) 的范围特别小(\(&lt;=2
简单网页制作
网页效果预览 这个网页包含图片,链接,字体设置,表格等 初学者最好手敲代码,更快熟悉元素和结构 完整的代码放在最后了 一:代码怎么变成网页 之前我们安装了xampp,启动xampp里的apache及sql 在xampp下找到htdocs目录 新建文件夹改名后缀为.php即可 将新建文件用记事本打开
简单网页制作 简单网页制作 简单网页制作
设计模式:代理、装饰和适配器模式的区别
结构对比 讲实话,博主当初学习完整设计模式时,这三种设计模式单独摘哪一种都是十分清晰和明确的,但是随着模式种类的增加,在实际使用的时候竟然会出现恍惚,例如读开源代码时,遇到不以模式命名规范的代码时,一时难以说清具体是使用的这三种里的哪一种。 之所以会出现混淆的原因是,三种模式的实现都是基于面向接口这
设计模式:代理、装饰和适配器模式的区别 设计模式:代理、装饰和适配器模式的区别 设计模式:代理、装饰和适配器模式的区别
Linux Kernel CFI机制简介及测试禁用
PS:要转载请注明出处,本人版权所有。 PS: 这个只是基于《我自己》的理解, 如果和你的原则及想法相冲突,请谅解,勿喷。 环境说明 无 前言 当我们为android移植linux的驱动程序的时候,总会遇到一些错误,这些错误有一部分就是android 内核开启的安全的机制导致的。本文就会介绍一种内核
Linux Kernel CFI机制简介及测试禁用 Linux Kernel CFI机制简介及测试禁用 Linux Kernel CFI机制简介及测试禁用
智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA
背景 最近长沙的天气暴热,室内达到了34-35度,天气预报最高温度上了40度,这么酷热的天气,离开了空调,基本上就是一身汗,全身湿透,特别难受,然后不得不开启家里的一台将近10年的老式定频空调,输入功率970W,OMG,一小时将近一度电,假设一天吹10小时,就是10度电,一个月三十天,10*30=3
智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA 智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA 智能家居如何把老款定频空调变成智能“变频”空调#米家#智能家居#HA
Python 代码中的 yield 到底是什么?
在Python编程中,有一个强大而神秘的关键字,那就是yield。初学者常常被它搞得晕头转向,而高级开发者则借助它实现高效的代码。到底yield是什么?它又是如何在Python代码中发挥作用的呢?让我们一起来揭开它的面纱。 Python里的一个非常重要但也颇具迷惑性的关键词——yield。 什么是y
Python 代码中的 yield 到底是什么? Python 代码中的 yield 到底是什么? Python 代码中的 yield 到底是什么?