vue router拦截器的简单使用
之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过还是感觉router拦截器比较省事。
router拦截器就是在路由跳转前后,做一些事情,相当于一个钩子函数。
下面说一下使用方法:
1、在main.js里 引入router
import router from "./router/router";
2、要在 vue实例前写入
//注册一个全局前置守卫,确保要调用 next 方法,否则钩子就不会被 resolved
router.beforeEach((to, from, next) => {
//路由切换时,如果没有就添加,有就跳过执行,添加固定参数
if (!to.query.addressCode) {
//准备一个跳转的query对象
let query = to.query
query.addressCode = tool.getAddressCode();//是一个封装好的获取addressCode的方法
alert.eduToast('没'+query.addressCode,6000);//调试代码
next({
path: to.path,
query: query
})
} else {
if (to.path !== window.location.pathname) {
// 此处不可使用location.replace
window.location.assign(to.fullPath)
} else {
next()
}
alert.eduToast('有',6000);//调试代码
}
})
vue router拦截器的简单使用的更多相关文章
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- Java结合SpringBoot拦截器实现简单的登录认证模块
Java结合SpringBoot拦截器实现简单的登录认证模块 之前在做项目时需要实现一个简单的登录认证的功能,就寻思着使用Spring Boot的拦截器来实现,在此记录一下我的整个实现过程,源码见文章 ...
- springmvc拦截器的简单了解
1.定义一个拦截器 2.在springmvc.xml中配置拦截器. (1)拦截器拦截的请求是建立在前端控制器配置之下的,若DispatcherServlet拦截的是*.action,则拦截器即使配置 ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue --- axios拦截器+form格式请求体
在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...
- vue interceptors(拦截器)
拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors ...
- vue axios 拦截器
前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- SpringMVC学习笔记九:拦截器及拦截器的简单实用
SpringMVC中的interceptor拦截器是非常重要的,它的主要作用就是拦截指定的用户请求,并进行相应的预处理和后处理. 拦截时间点在"处理器映射器根据用户提交的请求映射出所要执行的 ...
随机推荐
- 【emWin】例程十一:GIF图像显示
介绍: 本例程介绍gif格式图像显示的方法以及在GMT70,iCore3_ADP,7寸液晶模块.4.3寸液晶模块, VGA模块上的移植. 实验指导书及代码包下载: 链接:http://pan.baid ...
- (转载)完成端口(Completion Port, I/OCP)详解
http://www.cnblogs.com/lancidie/archive/2011/12/19/2293773.html 手把手叫你玩转网络编程系列之三 完成端口(Completion P ...
- (转)基于形状匹配的Halcon算子create_shape_model
HDevelop开发环境中提供的匹配的方法主要有三种,即Component-Based.Gray-Value-Based.Shape-Based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配 ...
- Python简易web服务
利用Python自带的包可以建立简单的web服务器.在DOS里cd到准备做服务器根目录的路径下,输入命令: python -m Web服务器模块 [端口号,默认8000] 例如: python -m ...
- java-信息安全(六)-基于RSA理解数字签名示例
概述 java-信息安全(四)-数据签名.数字证书 java-信息安全(五)-非对称加密算法RSA RSA工具类 使用java-信息安全(五)-非对称加密算法RSA项目中RSACoder 数字签名理解 ...
- [UFLDL] Linear Regression & Classification
博客内容取材于:http://www.cnblogs.com/tornadomeet/archive/2012/06/24/2560261.html Deep learning:六(regulariz ...
- [Bayes] Latent Gaussian Process Models
比较难理解,通过做题来入门. 目的:简单的了解下相关概念. 基础 热身 目的:找x到y的映射关系. 假设:Q latent functions {fi} fj 作为先验,跟x没什么直接关系,x只是作为 ...
- 九、K3 WISE 开发插件《工业单据老单序时薄插件工具栏按钮开发实例》
=============================== 目录: 1.添加工具栏按钮 2.查询被添加工具栏按钮的业务单据的FMenuID和FID 3.添加工具栏按钮和业务单据的映射关系 4.工具 ...
- inittab 解析
Linux完成内核(Kernel)引导后,会由init初始化进程调用/etc/inittab配置文件(ps -aux | less,init进程号为始终为1,是所有系统进程的起点,init进程也有一个 ...
- 【CF944G】Coins Exhibition DP+队列
[CF944G]Coins Exhibition 题意:Jack去年参加了一个珍稀硬币的展览会.Jack记得一共有 $k$ 枚硬币,这些硬币排成一行,从左到右标号为 $1$ 到 $k$ ,每枚硬币是正 ...