之前,为了实现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. Java如何清除空格?

    在Java编程中,如何清除/删除空格? 以下示例演示如何使用Util.regex.Pattern类的matcher.replaceAll(stringname)方法来删除空格. package com ...

  2. [原创] Xinput_1.3.DLL / MSVCR100.DLL文件缺失解决办法

    缺少如上文件,最简单粗暴的办法就是360卫士,找人工服务搜索方案,一键修复,屡试不爽!

  3. JAVA程序员_常用英语

    干程序员这行实在是离不开英语,干程序员是一项很辛苦的工作,要成为一个高水平的程序员尤为艰难.这是因为计算机软件技术更新的速度越来越快,而这些技术大多来源于英语国家,我们在引进这些技术时往往受到语言障碍 ...

  4. 网络编程 -- RPC实现原理 -- RPC -- 迭代版本V2 -- 本地方法调用 整合 Spring

    网络编程 -- RPC实现原理 -- 目录 啦啦啦 V2——RPC -- 本地方法调用 + Spring 1. 配置applicationContext.xml文件 注入 bean 及 管理 bean ...

  5. windows下特殊字符无法用来命名

    原则上可以利用键盘输入的英文字母.符号.空格.中文等均可以作为合法字符,但由于以下字符由系统保留它用,因此不能用在文件命名中: :   /  \  ?  *  “  <  >  |  注: ...

  6. Android studio启动后卡在refreshing gradle project

    这个问题几乎每个刚使用Android studio的同学都会碰到过,网上有各式各样的方法,有的说使用本地gradle,我试过多次,每次启动Android studio时还是会检查更新,所以根本上解决的 ...

  7. PCL Save VTK File With Texture Coordinates 使用PCL库来保存带纹理坐标的VTK文件

    我之前有一篇博客Convert PLY to VTK Using PCL 1.6.0 or PCL 1.8.0 使用PCL库将PLY格式转为VTK格式展示了如何将PLY格式文件转化为VTK格式的文件, ...

  8. node-sass 安装

    设置 export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" export SASS_BINARY_SI ...

  9. PAT甲级1061 Dating

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805411985604608 题意: 给定四个字符串. 前两个字符串 ...

  10. AtCoder Beginner Contest 070|Elena|8.12|#471

    打了场beginner的AtCoder,也是我第一次打AtCoder,虽然AK了,但是由于手速慢+撒比,才#471… 比赛链接:https://beta.atcoder.jp/contests/abc ...