Vue中$router,路由守卫beforeEach 的使用,以及 this.$router.push两种方式的区别

本文主要是介绍Vue中$router,路由守卫beforeEach 的使用,以及 this.$router.push两种方式的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、$router

在 Vue 实例内部,可以通过 $router 访问路由实例,即通过调用 this.$router.push进行连接跳转。

$router.push()传参的两种方式:

1、 this.$router.push({name:xx, params:{a:xx, b:xx}})//a, b是我们要传递给另一个页面的参数

       目标页面通过this.$route.params.a或this.$route.params.b来获取参数

2、this.$router.push({path:xx, query:{a:xx, b:xx}}) //a, b是我们要传递给另一个页面的参数

   目标页面通过this.$route.query.a或this.$route.query.b来获取参数

共同点:都能给跳转的目标页面传递参数

不同点:1、获取参数的方式不同     2、使用name-params的方式传递,参数不会显示到地址栏,而path-query则会,这个区别类似于post与get。

下图是login页面使用name-params传递参数:注意地址栏

下图是login页面使用path-query传递参数:注意地址栏

使用场景总结:name-params 可用于私密性有要求的情况,path-query则可以用于需要在地址栏显示参数的情况

官网有详细的用法解释. 链接:编程式的导航

 二、beforeEach的使用

使用场景: 一般用在跳转前需要做校验的地方,如:进入首页前做登录校验,如果已登录则跳转首页,否则跳转登录页。

使用的地方:

 如果是做跳转首页前做登录校验,需要写在main.js文件中,表示在所有路由被访问之前做校验;

import Vue from 'vue'
import App from './App'
import router from './router'
import config from './util/config'
import axios from 'axios'
import Cookies from 'js-cookie'
import iView from 'iview';
import 'iview/dist/styles/iview.css';import Home from './components/Home'
import Login from './components/login/login'Vue.use(iView);Vue.config.productionTip = false;
Vue.prototype.baseUrl = config.baseUrl;
Vue.prototype.$http = axios;
Vue.prototype.Cookies = Cookies;  //路由跳转前做判断
router.beforeEach((to, from, next) => {let hasLogin = Cookies.get('hasLogin'); //从cookies中获取是否已登陆过的信息if(hasLogin){next()}else{if(to.path == '/login'){next()}else{next({replace:true,name:'login',})}}
})/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

在使用beforeEach中,会遇到两个问题:

1、访问指定页面出现无法加载的情况(也就是空白)

2、访问指定页面,出现无限循环的问题

问题代码如下:

router.beforeEach((to, from, next)=>{if(hasLogin){ //如果已经登录,则直接跳转next();}else if(to.name === 'Home'){ //如果未跳转,且访问的是首页,则重定向到登录页next({replace:false,name:'login'})}
})

这么写代码会有个问题,那就是当hasLogin为false时,访问任意页面都会出现空白,这是因为:

  • next() 表示路由成功,直接进入to路由,不会再次调用router.beforeEach()
  • next('login') 表示路由拦截成功,重定向至login,会再次调用router.beforeEach()

也就是说beforeEach()必须调用next(),否则就会出现无限循环,next() 和 next('xxx') 是不一样的,区别就是前者不会再次调用router.beforeEach(),后者会!!!

 官网相关说明:前置全局守卫

解决方法:

router.beforeEach((to, from, next)=>{if(hasLogin){ //如果已经登录,则直接跳转next();}else if(to.name === 'Home'){ //如果未跳转,且访问的是首页,则重定向到登录页next({replace:false,name:'login'})}else{next() //新增这一句}
})/*
理解:
当调用完next({name:'login'}),再次调用router.beforeEach()时,此时的to.name可能已经不在router.beforeEach()的条件判断中了,因此需要加上next(),告诉路由守卫,这种情况的继续执行,而不至于停留。*/

理解:
当调用完next({name:'login'}),再次调用router.beforeEach()时,此时的to.name可能已经不在router.beforeEach()的条件判断中了,因此需要加上next(),告诉路由守卫,这种情况的继续执行,而不至于停留。

 

这篇关于Vue中$router,路由守卫beforeEach 的使用,以及 this.$router.push两种方式的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()?它的作用是什么?类比一下:二、join()的作用总结三、join()怎么

mybatis中resultMap的association及collectio的使用详解

《mybatis中resultMap的association及collectio的使用详解》MyBatis的resultMap定义数据库结果到Java对象的映射规则,包含id、type等属性,子元素需... 目录1.reusltmap的说明2.association的使用3.collection的使用4.总

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

mybatis-plus QueryWrapper中or,and的使用及说明

《mybatis-plusQueryWrapper中or,and的使用及说明》使用MyBatisPlusQueryWrapper时,因同时添加角色权限固定条件和多字段模糊查询导致数据异常展示,排查发... 目录QueryWrapper中or,and使用列表中还要同时模糊查询多个字段经过排查这就导致只要whe

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo