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

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Windows 上如果忘记了 MySQL 密码 重置密码的两种方法

《Windows上如果忘记了MySQL密码重置密码的两种方法》:本文主要介绍Windows上如果忘记了MySQL密码重置密码的两种方法,本文通过两种方法结合实例代码给大家介绍的非常详细,感... 目录方法 1:以跳过权限验证模式启动 mysql 并重置密码方法 2:使用 my.ini 文件的临时配置在 Wi

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren