vue路由守卫(回顾)

路由守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards)。官方定义:导航守卫(navigation-guards)。 文档地址:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

一、全局前置守卫beforEach

1. 守卫方法接收三个参数:

   to:即将要进入的目标路由对象

   from:当前导航正要离开的路由

   next:执行下一步

    /**
     * @param {to} 将要去的路由
     * @param {from} 出发的路由
     * @param {next} 执行下一步
     */
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title || '卖座电影';
        if (to.meta.needLogin && !$store.state.isLogin) {
            next({
                path: '/login'
            })
        } else {
            next()
        }
    })

二、全局后置钩子afterEach

 全局后置钩子与全局前置守卫类似,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身

    router.afterEach((to, from) => {
      // ...
   })

三、路由独享的守卫beforeEnter

   1. 使用方法与全局守卫相同

   2. 不同的是:全局守卫可以作用于全局,路由独享守卫只作用于被设置守卫的路由

        //登录模块
        path: '/login',
        component: () => import('@/views/login'),
        beforeEnter: (to, from, next) => {
            if (to.meta.needLogin && !$store.state.isLogin) {
                next({
                    path: '/login'
                })
            } else {
                next()
            }
        }

四、组件内的守卫

可以在路由组件内直接定义以下路由导航守卫:

1. beforeRouteEnter

   ① 在渲染该组件的对应路由被 confirm 前调用

   ② 不能 获取组件实例 this,因为当守卫执行前,组件实例还没被创建

   ③ 可以通过 next 获取data中的数据

  data() {
    return {
      name: "Grayly"
    };
  },  
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      alert("hello" + vm.name);
    })
  },

2. beforeRouteUpdate

这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch 的。但是通过这个勾子,我们有了更好的方式。

  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },

3. beforeRouteLeave

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

可以访问组件实例 this

  beforeRouteLeave: (to, from, next) => {
    if (confirm("你确定要离开吗") == true) {
      next();
    } else {
      next(false);
    }
  },

返回上一级路由

第一种:history.back();

第二种:this.$router.go(-1);
本文转载于网络 如有侵权请联系删除

相关文章

  • 数仓建设中最常用模型--Kimball维度建模详解

    五分钟学大数据,致力于大数据技术研究,如果你有任何问题或建议,可添加底部小编微信或直接后台留言数仓建模首推书籍《数据仓库工具箱:维度建模权威指南》,本篇文章参考此书而作。 文章首发公众号:五分钟学大数据,公众号中发送“维度建模”即可获取此书籍第三版电子书先来介绍下此书,此书是基于作者60多年的实际业务环境而总结的经验及教训,为读者提供正式的维度设计和开发技术。面向数仓和BI设计人员,书中涉及到的内容非常广泛,围绕一系列的商业场景或案例研究进行组织。强烈建议买一本实体书研究,反复通读全书至少三遍以上,你的技术将会有质的飞跃。数仓工具箱因为本文是纯理论知识,密密麻麻的字,很多人可能看不下去,所以我尽量用最少的字来表达,尽量将晦涩难懂的词语转化为通俗易于理解的词,将文中的重点加粗展示,内容尽量精简,以保证在不表达错误的情况下更利于读者学习!希望和大家能一起学习,一起进步,努力到达我们自己的金字塔顶部维度建模是什么维度模型是数据仓库领域大师RalphKimball所倡导,以分析决策的需求出发构建模型,构建的数据模型为分析需求服务,因此它重点解决用户如何更快速完成分析需求,同时还有较好的大规模复

  • 自动打码识别验证码服务端带demo

    易语言通用验证码识别服务端,用来做接口还是可以的!将127.0.0.1改成自己的服务器IP,或者域名 php:$rel=file_get_contents('http://www.zhuangjiba.com/d/file/help/2018/08/cfdefaddb3f47d78f8c66a7de28720aa.png'); $code=_upload($rel); echo'验证码:'.$code; function_upload($post=0){ $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,'http://127.0.0.1:5658'); curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false); curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false); //curl_setopt($ch,CURLOPT_HTTPHEADER,$httpheader); if($post){ curl_setopt(

  • WebAssembly 小 Demo

    意义WebAssembly是一种新的编码方式,可以在现代的网络浏览器中运行—它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如C/C++等语言提供一个编译目标,以便它们可以在Web上运行。WebAssembly被设计为可以和JavaScript一起协同工作—通过使用WebAssembly的JavaScriptAPI,你可以把WebAssembly模块加载到一个JavaScript应用中并且在两者之间共享功能。这允许你在同一个应用中利用WebAssembly的性能和威力以及JavaScript的表达力和灵活性。高效:WebAssembly有一套完整的语义,实际上wasm是体积小且加载快的二进制格式,其目标就是充分发挥硬件能力以达到原生执行效率。安全:WebAssembly运行在一个沙箱化的执行环境中,甚至可以在现有的JavaScript虚拟机中实现。在web环境中,WebAssembly将会严格遵守同源策略以及浏览器安全策略。开放:WebAssembly设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在we

  • ZROJ#398. 【18提高7】随机游走(期望dp 树形dp)

    题意[题目链接]版权原因就不发了。。给出一棵树,求出任意两点之间期望距离的最大值Sol比较清真的一道题吧。。设\(f[x]\)表示从\(x\)走到\(x\)的父亲的期望步数\(g[x]\)表示从父亲走来的期望步数\(d[x]\)表示\(x\)节点的度数不难得到方程\(f[x]=\sum_{to\inson[x]}f[to]+d[x]\)\(g[x]=g[fa[x]]+\sum_{to\inson[fa[x]]\text{且}to\not=x}f[to]+d[fa[x]]\)最后计算的时候维护向上向下最大值即可当然,仔细观察不难发现\(f[x]\)即为子树中所有节点的度数\(g[x]\)为整棵树中除子树外节点的度数考虑每条边的贡献后不难得到\(f[x]=2*siz[x]-1\)\(g[x]=2*(N-siz[x])-1\)#include<bits/stdc++.h> #definechmax(a,b)(a=a>b?a:b) #defineLLlonglong constintMAXN=1e5+10; inlineintread(){ charc=getchar();i

  • Java高级工程师面试总结

    面试技巧1、背熟你的简历原因:面试的第一个问题,一般都是让你简单介绍下你自己,或者介绍一下你最近的项目,而一个面试者,如果连自己的简历都无法熟知,对里面提到的项目、技术都无法描述清楚的话,我想没有哪家公司会接受这样的,哪怕你是超级人才,你自我表述不行,估计也会为此头疼,所以,切记:一定要背好自己的简历,不要求你能全部记下,至少要熟记你最近所待过的两家公司,这两家公司里面你做过的项目,你负责的模块,项目里面用到的技术以及相对应的技术实现方案(这个尤为重要)。2、深入了解并熟记部分Java基础知识原因:大部分公司无论面试初级还是高级,无论是笔试还是面试,都会问到一系列基础题,这些基础题大概涵括jvm、字符串、集合、线程等等,如果说每一个让你死记硬背你肯定记不住,那么就是理解中记忆了,拿jvm来说,如果让你谈谈你对jvm的理解,那么你首先得知道JVM有哪些结构组成,每个结构用来做什么的,然后考虑一个Java对象从创建到回收,如何途径JVM这些结构的。如果你从这些方面来综合记忆,相信事半功倍,并且你理解的更透彻。至于如果让你谈集合,举例List集合下面ArryList、LinkedList、V

  • Scala 学习:N-001

    主题:scala初识是什么开发环境的搭建简单的语法变量数据类型函数与代码块if,fortry,match求值策略:callbyvalue;callbyname柯里化递归和尾递归1.下载scala下载IntelliJ+scalaplugin下载javaSDK配置scala环境配置java环境验证是否安装成功:cmdjava-versionscala-versionPaste_Image.png2.Scala简介: Scala是ScalableLanguage的简写,是一门多范式的编程语言Scala特性:1.面向对象特性Scala是一种纯面向对象的语言,每个值都是对象。对象的数据类型以及行为由类和特质描述。 类抽象机制的扩展有两种途径:一种途径是子类继承,另一种途径是灵活的混入机制。这两种途径能避免多重继承的种种问题。2.函数式编程Scala也是一种函数式语言,其函数也能当成值来使用。Scala提供了轻量级的语法用以定义匿名函数,支持高阶函数,允许嵌套多层函数,并支持柯里化。Scala的caseclass及其内置的模式匹配相当于函数式编程语言中常用的代数类型。 更进一步,程序员可以利用Sc

  • JS执行顺序

    javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子1.console.log(test);2.vartest="你好";3.console.log(test);4.console.log(test2);第1行结果为:undefined第3行结果为:"你好"第4行会报错:test2isnotdefined执行第1行时,test还没有定义,为什么没像第4行一样报错?因为javascript执行时,在同一个作用域内是先编译再执行编译的时候会编译function和var这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值所以执行第1行时,vartest已经执行过了,所以test不会报错,而test2就会报错需要注意的是,对vartest执行编译时,只是先定义了test这个变量,并不会把"你好"这个值赋给test,而是到第2行时才给test赋值的,这就是为什么第1行的执行结果是undefined对于上面的例子,可以这样理解//先编译var定义的变量1.vartest;//编译完成后,从上到下执行代

  • 什么是用户画像?金融行业大数据用户画像实践

    进入移动互联网时代之后,金融业务地域限制被打破。金融企业没有固定业务区域,金融服务面对所有用户是平的。金融消费者逐渐年轻化,80、90后成为客户主力,他们的消费意识和金融意识正在增强。金融服务正在从以产品为中心,转向以消费者为中心。所有金融行业面对的最大挑战是消费者的消费行为和消费需求的转变,金融企业迫切需要为产品寻找目标客户和为客户定制产品。一、用户画像背后的原因1、金融消费行为的改变,企业无法接触到客户80后、90后总计共有3.4亿人口,并日益成为金融企业主要的消费者,但是他们的金融消费习惯正在改变,他们不愿意到金融网点办理业务,不喜欢被动接受金融产品和服务。年轻人将主要的时间都消费在移动互联网,消费在智能手机上。平均每个人,每天使用智能手机的时间超过了3小时,年轻人可能会超过4个小时。浏览手机已经成为工作和睡觉之后的,人类第三大生活习惯,移动APP也成为所有金融企业的客户入口、服务入口、消费入口、数据入口。金融企业越来越难面对面接触到年轻人,无法像过去一样,从对话中了解年轻人的想法,了解年轻人金融产品的需求。2、消费者需求出现分化,需要寻找目标客户客户群体正在出现分化,市场上很少

  • 腾讯云腾讯云TI平台TIapi接口

    1.接口描述接口请求域名:tione.tencentcloudapi.com。 启动模型训练任务 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:StartTrainingTask。 Version 是 String 公共参数,本接口取值:2021-11-11。 Region 是 String 公共参数,详见产品支持的地域列表。 Id 是 String 训练任务ID 3.输出参数 参数名称 类型 描述 RequestId String 唯一请求ID,每次请求都会返回。定位问题时需要提供该次请求的RequestId。 4.示例示例1启动训练任务输入示例POST/HTTP/1.1 Host:tione.tencent

  • 第二次作业

    #include<stdio.h> voidswap(int*a,int*b); intmain() { inta=1,b=2; int*p1,*p2; printf("%d%d\n",a,b); p1=&a; p2=&b; swap(p1,p2); } voidswap(int*a,int*b) { inti; i=*a; *a=*b; *b=i; printf("%d%d\n",*a,*b); }复制 12 21 复制   总结:通过这个程序我使用指针作为函数的参数,对两个数字进行的交换,体会的指针的作用。 #include<stdio.h> voidswap(int*p,int*q) { int*m; *m=*p; *p=*q; *q=*m; } intmain() { inta,b; scanf("%d,%d",&a,&b); swap(&a,&b); printf("a=%db=%d\n",a,b); return0; }复制 使用了为初始化的指针变量指向了未知的地址是错误的操作

  • Ubuntu 安装和使用 Supervisor(进程管理)

    服务器版本Ubuntu16.04LTS。 Supervisor是一个用Python写的进程管理工具,可以很方便的对进程进行启动、停止、重启等操作。 安装命令: $apt-getinstallsupervisor 复制 安装成功后,会在/etc/supervisor目录下,生成supervisord.conf配置文件。 你也可以使用echo_supervisord_conf>supervisord.conf命令,生成默认的配置文件(不建议,内容比较多)。 supervisord.conf示例配置: ;supervisorconfigfile [unix_http_server] file=/var/run/supervisor.sock;(thepathtothesocketfile) chmod=0700;sockeffilemode(default0700) [supervisord] logfile=/var/log/supervisor/supervisord.log;(mainlogfile;default$CWD/supervisord.log) pidfile=/

  • 【笔记】理解CSS3之Flexbox布局

    前言 先看一个例子,html代码如下: <ul> <li>1</li> <li>2</li> <li>3</li> </ul>复制 CSS样式如下: html,body,ul,li{ padding:0; margin:0; } ul{ display:flex; list-style:none; border:1pxsolidred; padding:0; } li{ width:100px; height:100px; background-color:#8cacea; margin:8px; padding:4px; }复制 我们对ul设置了display:flex,那么这个ul就是一个flex容器,子元素li就是flex项目。 总结术语: Flex容器(FlexContainer):父元素显式设置了display:flex Flex项目(FlexItems):Flex容器内的子元素 Flex容器属性 flex-direction||flex-wrap||flex-fl

  • java 语法 java没学好,休想学好安卓!

    int...a里面的...表示可变参数,也就是说这是一个长度不定的数组 instanceof: instanceof关键字用于判断一个引用类型变量所指向的对象是否是一个类(或接口、抽象类、父类)的实例。   举个例子:   public interface IObject{ } public class Foo implements IObject{ } public class Test extends Foo{ } public class MultiStateTest{         public static void main(Stringargs[]){        &nb

  • Springmvc入门

     Spring入门   Springmvc是什么     Springwebmvc和Struts2都属于表现层的框架,都是web端的框架,是spring的一部分 结构:     Spirngmvc的流程处理:       入门程序 需求:使用浏览器显示商品列表 首先创建一个web工程叫springmvc03      在导包     导             加入配置文件   创建config资源文件夹,        在config里创建核心配置文件  springmvc.xml 粘贴约束和配置controller扫描包 <beansxmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XML

  • 聊聊这两年我用到的面试套路和收获

    1这篇文章,分享下在过去两年多的工作中,在面试方面的经历,当然,并不是被别人面试,而是面试别人。 最早应该在两年前,那时我刚工作不久,当时部门刚组建,在上海的团队加上我也不过三人,因此,一直在不断的招人。我当时的mentor就成为主力面试官,所以,我就有不少机会跟在他屁股后面去蹭面试。 之前找工作时一直被面试,从未面试过别人,所以刚开始特别紧张,坐在面试者对面,我反而是最紧张的那个,只能拿着笔和本子,假装在记录,一句话都不敢问。后来慢慢脸皮厚了,开始站在面试官的角度去面对面试者。 2因为当时工作不久,而面试的大多是工作三到五年,甚至七年的工程师,所以,在我眼里他们都厉害得不行,非常希望通过这个机会去学习他们的经验。 我开始尝试用这样一种套路: 我:工作不到一年的菜鸟,伪装的资深面试官。 面试者A:工作五年的软件工程师。 我:“你好,看你的简历上写着你在软件开发方面有超过五年的工作经验,能谈谈你觉得一个五年工作经验的开发者应该具备哪些能力吗?” 如果A这么回答,“在专业上要有比较扎实的能力。” 我:“那在专业上的能力有哪些?” … 如果A这么回答,“要比较好的沟通协调能力。” 我:“那沟

  • Asp.Net Core 缓存使用_Asp.Net core 浏览器缓存(客户端缓存)

    Asp.NetCore缓存使用_Asp.Netcore浏览器缓存 一、ResponseCacheAttribute浏览器缓存_客户端缓存 Asp.NetCore项目中内置 ResponseCache()缓存方式 使用方式如下: ///<summary> ///缓存1分钟 ///</summary> ///<returns></returns> [ResponseCache(Duration=60)] [HttpGet] publicIActionResultIndex() { returnView(); }复制   浏览器缓存模式是根据浏览器http协议cache-control控制: RFC7324是HTTP协议中对缓存进行控制的规范,其中重要的是cache-control这个响应报文头。服务器如果返回cache-control:max-age=60,则表示服务器指示浏览器端“可以缓存这个响应内容60秒”。 测试如下:         二、客户端缓存,可以配置参数使用

  • windows下mysql5.6.x的日志正确配置方法(my.ini) (网上的都是5.6之前的版本)

    https://blog.csdn.net/databatman/article/details/49951853 感谢楼主,找了好久,试了一下楼主的,果然是对的,网上的日志配置都是5.6之前的版本; 对于版本5.6.21可行   加入: [mysqld] #log #错误日志 log-error=D:/ProgramFiles/mysql-5.6.21-winx64/mysql-log/error_log.err #全查询日志 log_output=FILE #不启用的话慢日志查询会存在数据表中 general_log=on general_log_file=D:/ProgramFiles/mysql-5.6.21-winx64/mysql-log/query.log #慢查询日志 slow_query_log=on long_query_time=2 #慢于2秒的会被记录 slow_query_log_file=D:/ProgramFiles/mysql-5.6.21-winx64/mysql-log/slowquery.log #二进制日志配置,第二、三行配置最后

  • UI自动化,主流浏览器,环境搭建,Selenium,Java--L

     概要 ***主流浏览器:chrome+firefox+ie web自动化--》UI--》黑盒测试(手工、功能、点点点) 工具:编程语言(Java、Python)+工具(自动化测试工具--》selenium)复制 ***特点: 用于Web应用程序测试的工具 直接运行在浏览器,模拟用户操作 覆盖Windows、Linux和Mac 覆盖IE、Chrome、FireFox等浏览器 Jaava、Python多语言进行脚本编写复制 ***selenium官网:https://docs.seleniumhq.org/download/复制 ***jar包的引入: 1.建一个文件夹,把*.jar复制进去 2.选中jar,右键,buildpath ***查看jar的源码:   selenium-java-2.53.1-srcs.jar复制  driver官方下载:针对不同的selenium版本: https://selenium-release.storage.googleapis.com/index.html?path=2.53/ IE,

  • Linux中的硬链接和软连接

    1.Linux链接概念Linux链接分两种,一种被称为硬链接(HardLink),另一种被称为符号链接(SymbolicLink)。默认情况下,ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中,保存在磁盘分区中的文件不管是什么类型都给它分配一个编号,称为索引节点号(InodeIndex)。在Linux中,多个文件名指向同一索引节点是存在的。一般这种连接就是硬连接。硬连接的作用是允许一个文件拥有多个有效路径名,这样用户就可以建立硬连接到重要文件,以防止“误删”的功能。其原因如上所述,因为对应该目录的索引节点有一个以上的连接。只删除一个连接并不影响索引节点本身和其它的连接,只有当最后一个连接被删除后,文件的数据块及目录的连接才会被释放。也就是说,文件真正删除的条件是与之相关的所有硬连接文件均被删除。 硬连接的2个限制: l  不允许给目录创建硬链接 l  只有在同一文件系统中的文件之间才能创建链接。即不同硬盘分区上的两个文件之间不能够建立硬链接。这是因为硬链接是通过结点指向原始文件的,而文件的i-结点在不同的文

  • mosquitto

    $sudoyum-yinstallepel-release $sudoyum-yinstallmosquitto $sudosystemctlstartmosquitto $sudosystemctlenablemosquitto #Configfileformosquitto # #Seemosquitto.conf(5)formoreinformation. # #Defaultvaluesareshown,uncommenttochange. # #Usethe#charactertoindicateacomment,butonlyifitisthe #veryfirstcharacterontheline. #================================================================= #Generalconfiguration #================================================================= #Useperlistenersecuritysetting

  • 世间最极致的心理学:人有八层意识,绝大多数人只能活到前五层!

    大乘佛教有两大主干,一是般若中观,另一就是法相唯识。 八识四智 道破人心至深义谛 八识 说的是人有八层意识,由浅到深分别是:前五识——眼识、耳识、鼻识、舌识、身识;第六识——意识;第七识——末那识;第八识——阿赖耶识。 对照心理学,这八识说白了其实很简单:前五识就是感官,第六识就是我们通常所说的意识,第七识就是人的潜意识,第八识则是宇宙识——就好像所有物质还原到微观层面都是由相同的微观元素组成,并联系为一个整体,人的精神还原到最深幽处而与天地宇宙连接的地方,就是第八识。 按照这种说法,人的心灵结构应该是一个金字塔形——越往深了去越博大深沉,越往浅了去越细小轻薄。这就是为什么一切关于修为和境界的说法,都指向欲望的减少和降低,因为这个金字塔的塔尖浅表处正是五识所在,五识关系的则正是欲望。 而大多数人的心灵结构是怎样的呢?——不断地向外逐求,不断地扩张欲望,往下的格局却越来越小,越来越狭隘逼仄,于是成为一个倒金字塔。于是人的前五识落在了欲望,第六识落在了局限,第七识落在了执着——所谓“我执”,第八识落在了混沌,全乱了。《心经》告诫我们“远离颠倒梦想”,啥叫颠倒梦想?这就是。正如《庄子》所说:

相关推荐

推荐阅读