之前,为了实现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. 【iCore1S 双核心板_FPGA】例程十六:基于SPI的ARM与FPGA通信实验

    实验现象: 核心代码: int main(void) { int i,n; ]; ]; HAL_Init(); system_clock.initialize(); led.initialize(); ...

  2. yarn 常用命令(基于vue框架)

    初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...

  3. GitHub私有代码库将免费开放

    1月8号消息,微软收购 GitHub 后,官方宣布了一项重大更新:免费开放私有代码库, 即 GitHub 用户现在可以免费创建无限量的私有存储库.同时还有另一项更新——GitHub Enterpris ...

  4. ASP.NET IIS Registration Tool (Aspnet_regiis.exe)

    IIS Version Special cases for 32-bit versions of Aspnet_regiis.exe 6.0 You can run the 32-bit versio ...

  5. 解决Django-1.8.2应用部署到Apache后无法显示admin应用的CSS

    在将Django-1.8.2应用部署到Apache后,无法显示admin应用的静态内容,而在“manage.py runserver”命令下可以正常显示,主要是Apache没有找到Django静态内容 ...

  6. Spark学习笔记——读写MySQL

    1.使用Spark读取MySQL中某个表中的信息 build.sbt文件 name := "spark-hbase" version := "1.0" scal ...

  7. SFTP编辑linux文件 ——mac sublime text2 sftp

    llinux上编辑文件总是个头疼的事儿.mac上没有nodepad++和editplus,他们都有各自支持的sftp插件,editplus比较好 自然就带了,而notepad++需要另行安装. 下面介 ...

  8. [PHP] 07 - Json, XML and MySQL

    前言 [Node.js] 09 - Connect with Database 菜鸟JSON教程[内容不多] PHPSimpleXML[大概了解下即可] SQL语句需要复习一遍:http://www. ...

  9. Window应急响应(二):蠕虫病毒

    0x00 前言 ​ 蠕虫病毒是一种十分古老的计算机病毒,它是一种自包含的程序(或是一套程序),通常通过网络途径传播,每入侵到一台新的计算机,它就在这台计算机上复制自己,并自动执行它自身的程序. 常见的 ...

  10. Mac和Windows中常见中文字体的英文名称

    我们在给HTML元素设置字体的时候经常会有类似 “ font-family:"微软雅黑", "黑体" ” 这样的写法,尤其是在使用Dreamweaver.Apt ...