之前,为了实现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拦截器的简单使用的更多相关文章

  1. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  2. Java结合SpringBoot拦截器实现简单的登录认证模块

    Java结合SpringBoot拦截器实现简单的登录认证模块 之前在做项目时需要实现一个简单的登录认证的功能,就寻思着使用Spring Boot的拦截器来实现,在此记录一下我的整个实现过程,源码见文章 ...

  3. springmvc拦截器的简单了解

    1.定义一个拦截器 2.在springmvc.xml中配置拦截器. (1)拦截器拦截的请求是建立在前端控制器配置之下的,若DispatcherServlet拦截的是*.action,则拦截器即使配置 ...

  4. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  5. vue --- axios拦截器+form格式请求体

    在vue2.x中使用CLI生成的模板有很大改变,需要自己手动在main.ts同级目录下新建interceptors.ts interceptors.ts import axios from 'axio ...

  6. vue interceptors(拦截器)

    拦截器 顾名思义: 就是半路个您劫持, 拦截器 其实在项目和自己写demo中,总会遇到请求方面需要在请求头里面做判断或者添加一些东西, 这时候 vue 中应用中axios的 interceptors  ...

  7. vue axios 拦截器

    前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为 ...

  8. vue 路由拦截器和请求拦截器

    路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...

  9. SpringMVC学习笔记九:拦截器及拦截器的简单实用

    SpringMVC中的interceptor拦截器是非常重要的,它的主要作用就是拦截指定的用户请求,并进行相应的预处理和后处理. 拦截时间点在"处理器映射器根据用户提交的请求映射出所要执行的 ...

随机推荐

  1. 【emWin】例程十一:GIF图像显示

    介绍: 本例程介绍gif格式图像显示的方法以及在GMT70,iCore3_ADP,7寸液晶模块.4.3寸液晶模块, VGA模块上的移植. 实验指导书及代码包下载: 链接:http://pan.baid ...

  2. (转载)完成端口(Completion Port, I/OCP)详解

    http://www.cnblogs.com/lancidie/archive/2011/12/19/2293773.html 手把手叫你玩转网络编程系列之三    完成端口(Completion P ...

  3. (转)基于形状匹配的Halcon算子create_shape_model

    HDevelop开发环境中提供的匹配的方法主要有三种,即Component-Based.Gray-Value-Based.Shape-Based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配 ...

  4. Python简易web服务

    利用Python自带的包可以建立简单的web服务器.在DOS里cd到准备做服务器根目录的路径下,输入命令: python -m Web服务器模块 [端口号,默认8000] 例如: python -m ...

  5. java-信息安全(六)-基于RSA理解数字签名示例

    概述 java-信息安全(四)-数据签名.数字证书 java-信息安全(五)-非对称加密算法RSA RSA工具类 使用java-信息安全(五)-非对称加密算法RSA项目中RSACoder 数字签名理解 ...

  6. [UFLDL] Linear Regression & Classification

    博客内容取材于:http://www.cnblogs.com/tornadomeet/archive/2012/06/24/2560261.html Deep learning:六(regulariz ...

  7. [Bayes] Latent Gaussian Process Models

    比较难理解,通过做题来入门. 目的:简单的了解下相关概念. 基础 热身 目的:找x到y的映射关系. 假设:Q latent functions {fi} fj 作为先验,跟x没什么直接关系,x只是作为 ...

  8. 九、K3 WISE 开发插件《工业单据老单序时薄插件工具栏按钮开发实例》

    =============================== 目录: 1.添加工具栏按钮 2.查询被添加工具栏按钮的业务单据的FMenuID和FID 3.添加工具栏按钮和业务单据的映射关系 4.工具 ...

  9. inittab 解析

    Linux完成内核(Kernel)引导后,会由init初始化进程调用/etc/inittab配置文件(ps -aux | less,init进程号为始终为1,是所有系统进程的起点,init进程也有一个 ...

  10. 【CF944G】Coins Exhibition DP+队列

    [CF944G]Coins Exhibition 题意:Jack去年参加了一个珍稀硬币的展览会.Jack记得一共有 $k$ 枚硬币,这些硬币排成一行,从左到右标号为 $1$ 到 $k$ ,每枚硬币是正 ...