关于this.router 和this.route的总结

this.router 和this.route这2个东西一直在用可是我还是迷迷糊糊的不知道啥啥意思,尤其是idea的提示功能,总是让我一个回车就弄错了。

总结一波:

概述

this.$router(路由实例) : 是VueRouter的实例.包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,前提是你注册了才行别不注册就想用。

this.$route: 表示当前路由对象,就是每个页面创建了就会生成一个路由,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, meta, params, query 等属性。

首先说route

route的话是当前页面的内容,表示当前的路由信息,如果要获取到当前页面中的内容才要用它,比如说你在当前页面拿url的参数,或者是在,包含了当前url解析得到的信息,包含当前的路径、参数、更包括name、path、query、params等内容只要是当前页面所有的路由信息都可以拿到

his.$router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等.

想要导航到不同的url,则使用$router.push()

router

router是一个大的对象是一个路由数组,那如果要做跳转吗,或者是获取一些过往的路由信息,或者是退到上一页这种操作都用它
r o u t e r 对象是全局路由的实例,是 r o u t e r 构造方法的实例 , 包含了一些路由的跳转方法,钩子函数等 . p u s h 想要导航到不同的 u r l ,则使用 router对象是全局路由的实例,是router构造方法的实例,包含了一些路由的跳转方法,钩子函数等. push\ 想要导航到不同的url,则使用 router对象是全局路由的实例,是router构造方法的实例,包含了一些路由的跳转方法,钩子函数等.push 想要导航到不同的url,则使用router.push()

$router对象是全局路由的实例,是router构造方法的实例

路由实例方法:

push(): push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
go(): 页面路由跳转 前进或者后退
replace(): replace方法是替换当前的页面, 不会向 history 栈添加一个新的记录。 一般使用replace来做404页面,因为直接替换了,点击后退的时候就没办法回到之前的页面,所以真的很少用

关于一些其他的路由小问题

1.为啥新建一个项目的时候总是后面会出现一个

有#是使用URL hash模式的缘故,#代表网页中的一个位置,右边的字符就是该位置的标识符,从#开始的部分就是URL的锚部分,vue-router默认的是hash模式,如果觉得#在url中影响美观,可以更改为history模式。
前端路由有3种模式

hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。

history: 依赖 HTML5 History API 和服务器配置。

abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式
在这里插入图片描述

导航守卫能干啥

  1. 铺垫知识
    导航守卫的参数意义如下

to:这是一个表示用户试图进入的目标路由的路由对象。to 包含了有关目标路由的信息,如路径、参数、查询参数等。你可以使用这个参数来检查用户试图访问的目标路由,并基于这些信息决定是否允许访问。

from:这是一个表示用户当前所在的路由的路由对象。from 包含了有关当前路由的信息,如路径、参数、查询参数等。你可以使用这个参数来执行一些操作,例如记录用户从哪个路由来。

next:这是一个函数,用于控制导航行为。你必须调用 next 来告诉 Vue Router 是否允许用户进入目标路由,以及在何种情况下允许。next 可以接受一个参数,它可以是一个字符串,也可以是一个路由对象,用于指定用户应该导航到哪个路由。

1.全局前置守卫

router.beforeEach((to, from, next) => {// 进行相关配置
})

2.路由独享的守卫

{path: '/about',name: 'About',component: About,beforeEnter: (to, from, next) => {// 进行相关配置}
},

3.组件内的守卫

beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用(组件创建前调用)// 不能获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建console.log("beforeRouteEnter",to,from);next()},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,由于 会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`console.log("beforeRouteUpdate",to,from);next()},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`console.log("beforeRouteLeave",to,from);next()}

4.对于方法中的next的理解

如果调用 next(),表示允许用户进入目标路由。
如果调用 next(false),表示阻止用户导航,保持在当前路由。
如果调用 next(‘/some-route’),表示重定向到指定路由。
如果调用 next(error),表示导航被取消,并且可以传递一个错误对象以提供详细信息。

next()即为放行,但next(‘/login’)、next({ …to, replace: true })则不只是简单的将路由切到其参数。next()有参数时则表示中断当前导航,执行新的导航,意味着会执行一遍新的beforeEach,新的beforeEach的参数to则是next()`的参数内容。

例如:next(‘/login’)则会转化为beforeEach(‘/login’, from, next)被执行。

这意味着,如果你的全局守卫中没有正确的next()将会陷入死循环

再说next({ …to, replace: true })

通过addRoute动态添加的路由如果刚添加完就立刻放行,此时addRoute还没有执行结束,因此找不到刚添加的路由,就会导致白屏,因此需要重新访问一遍路由才行

next({…to})则能够递归调用beforeEach直到找到对应的路由。

replace:true则是防止在递归调用期间用户点击浏览器的后退按钮产生错误。

在这里插入图片描述

//路由表
const routes = [路由配置]
//构建路由对象
const routers = new Router({routes
});// 写全局前置守卫
// to当前即将要进入的路由对象
routers.beforeEach((to, from, next) => {//如果当前的访问的请求是Login放行if (to.path === '/Login') {console.log(to);console.log(to.path);next();}else {//其余访问请求判断用户是否登录if (!isLoggedIn()) {console.log(to);console.log(to.meta);console.log("抱歉你未登录");next({ path: '/Login' }); // 如果用户未登录,则重定向到登录页面} else {next();}}
})
//登录验证函数
function isLoggedIn() {console.log("进入路由守卫");// 在这里实现检查用户是否已登录的逻辑,例如检查是否有有效的令牌或会话// 如果已登录,返回true,否则返回falseconst user = sessionStorage.getItem('user'); // 从sessionStorage中获取会话信息return user !== null; // 如果会话信息存在,则用户已登录
}//导出路由对象 便于在main.js导入
export default routers;

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

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

相关文章

【PHP】PHP实现RSA加密,解密,加签,验签

1.php RSA生成公私钥 // 生成密钥对 $config array("digest_alg" > "sha256", // 加密算法"private_key_bits" > 2048, // 密钥长度(位数) );// 创建并保存私钥到文件 $res openssl_pkey_new($config); if (!fil…

.NET Core SkiaSharp 替代 System.Drawing.Common 的一些用法

在.NET 6中,微软官方建议把 System.Drawing.Common 迁移到 SkiaSharp 库。因为System.Drawing.Common 被设计为 Window 技术的精简包装器,因此其跨平台实现欠佳。 SkiaSharp是一个基于谷歌的Skia图形库(Skia.org)的用于.NET平台的…

WebSocket项目中难点与解决方法

1、难点一:连接建立与保持 问题描述: 在项目中,我们发现WebSocket初始连接负担较大,主要体现在频繁的连接建立和保持连接的开销较高。 解决方法: 1. 连接池管理:我们引入了websocket-pool库,通…

Mysqld的关键优化参数

skip-name-resolve 现象 mysql连接很慢,登陆到服务器上查看服务器日志都是正常的,无可疑记录,登陆到mysql服务器上,查看下进程,发现有很多这样的连接: 218 | unauthenticated user | 192.168.10.6:44500 |…

Springcloud 微服务实战笔记 Eureka

服务治理 服务注册 在服务治理框架中,通常都会构建一个注册中心,每个服务单元向注册中心登记自己提供的服务,将主机与端口号、版本号、通信协议等一些附加信息告知注册中心,注册中心按服务名分类组织服务清单。当服务启动后&…

PS制作2寸或者1寸排版打印照

最近家人需要2寸照,然后之前照的摄影馆给打印的是一版1寸照纸质和一张精修的原版照,然后要打印2寸照的话就存在两种选择: 需要自己做排版打印照,拿去打印店打印,要么就是直接拿着这张精修的单照去打印店让打印店的工作…

Vue websocket的封装及使用

创建 WebSocket 连接的函数 创建 WebSocket 连接:通过传入的 url 参数创建一个 WebSocket 实例。 监听连接打开事件:当连接成功建立时,执行传入的 onOpen 回调函数。 监听消息接收事件:当接收到消息时,将消息解析为 …

NLP基础——TF-IDF

TF-IDF TF-IDF全称为“Term Frequency-Inverse Document Frequency”,是一种用于信息检索与文本挖掘的常用加权技术。该方法用于评估一个词语(word)对于一个文件集(document)或一个语料库中的其中一份文件的重要程度。…

如何删除K8S中的Pod

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

全国(山东、安徽)职业技能大赛--信息安全管理与评估大赛题目+答案讲解——linux应急响应篇

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 == 养成习惯(一键三连)😋 🎉欢迎关注💗一起学习👍一起讨论⭐️一起进步…

图论及其应用的一些论断---选择题

在任意一个网络N=(X,Y,I,A,c)中,最大流的值等于最小割的容量。在任意6个人的集会上,要么有3个人互相认识,要么有3个人互不认识。若G为无向简单图,则图G的边数ε,点数v之间有: ε < = ( v 2 ) ε<=\binom{v}{2} ε<=

代码随想录|贪心day2

122.力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 买股票的最佳时机&#xff0c;这道题其实和53有一点像&#xff0c;因为不需要写出哪个区间卖出买进&#xff0c;所以判断prices[i] - prices[i - 1]的值的大小&#xff0c;如果这个值是正的&#…

修复异常关机导致CentOS文件系统内存数据损坏的问题

今天一同事重启wifi直接拔的电源&#xff0c;导致服务器异常关机&#xff0c;重启之后发现虚拟机报错&#xff1a; [17.874068] xTS (dm-8): Corruption of in-memory data detected. Shutting dowm filesystem[17.874069] XTS (dm-8): Please umount the f ilesystem and rect…

kotlin first/last/indexOf/elementAt

kotlin 中 first 是取集合元素中第一个元素 last 是取集合元素中最后一个元素 indexOf 根据元素寻找下标&#xff0c;默认是第一个 elementAt 根据下标找元素 下面写一个demo 说明下他们几个的使用 val list listOf("A", "D", "A", "…

java 打印日志的几种方式

java 打印日志的几种方式 Java 日志框架进化史日志门面与日志系统 Log4jslf4jLog4j2slf4jLogbackslf4j 一、先简单介绍五种 &#xff08;1&#xff09;最简单的方式&#xff0c;就是system.println.out(error) ,这样直接在控制台打印消息了&#xff1b; &#xff08;2&#xff…

龙格-库塔(Runge–Kutta)法 (Dopri5, Euler method,Explicit midpoint method)

在数值分析中&#xff0c;龙格-库塔方法是一系列隐式和显式迭代方法&#xff0c;其中包括欧拉方法&#xff0c; 显式中心点法&#xff0c; ,后向欧拉方法, &#xff0c;用于联立非线性方程近似解的时间离散化。[2]这些方法是由德国数学家Carl Runge和Wilhelm Kutta。 显式欧拉…

如何在iPhone设备中查看崩溃日志

​ 目录 如何在iPhone设备中查看崩溃日志 摘要 引言 导致iPhone设备崩溃的主要原因是什么&#xff1f; 使用克魔助手查看iPhone设备中的崩溃日志 奔溃日志分析 总结 摘要 本文介绍了如何在iPhone设备中查看崩溃日志&#xff0c;以便调查崩溃的原因。我们将展示三种不同的…

打破无声世界:让您的网站会说话

导语&#xff1a;在当今的互联网世界&#xff0c;技术创新日新月异&#xff0c;为广大开发者提供了无数便捷的工具。本文将为您介绍前端文本语音API&#xff0c;这一神奇的技术能够实现文字到语音的转换&#xff0c;为您的项目增添更多可能性。同时&#xff0c;我们还将为您提供…

uniapp中uview组件库的Input 输入框 的使用方法

目录 #平台差异说明 #基本使用 #输入框的类型 #可清空字符 #下划线 #前后图标 #前后插槽 API #Props #Events #Methods #Slots 去除fixed、showWordLimit、showConfirmBar、disableDefaultPadding、autosize字段 此组件为一个输入框&#xff0c;默认没有边框和样式…

UE5 VR版增强输入初体验 官方模板学习

问题 我们传统的输入方式&#xff0c;是通过编辑器设置输入操作映射&#xff0c;然后BindAction和BindAxis绑定 这边插播一条增强输入知识点&#xff0c;参考知乎大佬文章 和增强输入的VR模板教学&#xff1a;如何使用VR模板在UE5中使用增强输入系统_哔哩哔哩_bilibili 实践操…