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

相关文章

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s