router.beforeEach((to,from,next)=>{})

回调函数中的参数,

to:进入到哪个路由去,

from:从哪个路由离开,

next:函数,决定是否展示你要看到的路由页面。

  • 如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。
  • 这样就可实现,用户在未登录状态下,展示的一直是登录界面。
  • router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path == '/register'){
    next();
    }else{
    alert('您还没有登录,请先登录');
    next('/login');
    }
    })

全局后置钩子router.afterEach((to,from)=>{})

  • 只有两个参数,
  • to:进入到哪个路由去,
  • from:从哪个路由离。
  • 如下,每次切换路由时,都会弹出alert,点击确定后,展示当前页面。
  • router.afterEach((to,from)=>{
    alert("after each");
    })

关于next这个方法的描述应该如何理解

1.next()

你乘坐汽车要从A景区到B景区,路过关卡时,守门人拦下你,你量出了next(),守门人一看没问题,赶紧放行,于是你顺利到达了B景区。

2.next(false)

如果你量出了next(false),守门人立马关住大门,不让你走,哪都不让你去,你说想换个交通方式,走路或者坐飞机,都不行,老实待在A景区吧

3.next('/')  

你原本打算从A景区到B景区,但是走到关卡的时候由于某些原因改变了主意,想要去C景区,你对守门员量出了next({path:'/C'}),守门员一看,哦,原来你不去B了,要去C啊,去吧去吧,
然后你顺利到达了C景区

4.next(error)  

你在出发之前,给你妈妈说,妈,要是有什么事我立马通知你,你记得查看消息啊(你注册了router.onError())走到中途,
出现了意外,你发出next(error),然后你妈就收到了消息,赶紧打电话问你怎么了(执行router.onError()里的回调)

  

  

 

vue路由守卫(全局守卫)的更多相关文章

  1. vue路由独享守卫beforeEnter

    在某个路由中,使用beforeEnter()方法,参数是to,from,next 和全局路由守卫的用法是一样的 例子: import Vue from 'vue' import Router from ...

  2. Vue路由守卫(跳转页面置顶的处理方)

    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...

  3. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  4. vue 路由导航白话全解析

    这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档 路由守卫 路由守卫说白了就是路由拦截,在地址栏跳转之前 之后 跳转的瞬间 干什么事 全局守卫 全局守卫顾名思义,就是全局的,整个项目所有路 ...

  5. Vue 2.0 路由全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  6. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  7. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  8. vue --- 全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...

  9. vue路由监听及路由守卫

    路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...

  10. Vue路由守卫之路由独享守卫

    ​ 路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ...

随机推荐

  1. 数据标记系列——标记工具Imagtagger

    https://github.com/bit-bots/imagetagger 待有空说一说!

  2. 蒟蒻浅谈树链剖分之一——两个dfs操作

    树链剖分,顾名思义就是将树形的结构剖分成链,我们以此便于在链上操作 首先我们需要明白在树链剖分中的一些概念 重儿子:某节点所有儿子中子树最多的儿子 重链:有重儿子构成的链 dfs序:按重儿子优先遍历时 ...

  3. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  4. eclipse安装Activiti

    一. eclipse自己下载 打开eclipse软件,然后点击菜单栏的help选项,选择install New Software,示例如下: 出现如下对话框: 点击添加[Add]按钮,出现如下对话框 ...

  5. 2018-2019 ACM-ICPC, Asia East Continent Finals部分题解

    C:显然每p2个数会有一个0循环,其中22 32 52 72的循环会在200个数中出现,找到p2循环的位置就可以知道首位在模p2意义下是多少,并且循环位置几乎是唯一的(对72不满足但可能的位置也很少) ...

  6. mongoDB 小练习

    1 创建数据库名为 grade > use grade switched to db grade 2 创建集合 class 3 插入若干数据 格式如下{name:xxx,age:xxx,sex: ...

  7. luogu4770 [NOI2018]你的名字 (SAM+主席树)

    对S建SAM,拿着T在上面跑 跑的时候不仅无法转移要跳parent,转移过去不在范围内也要跳parent(注意因为范围和长度有关,跳的时候应该把长度一点一点地缩) 这样就能得到对于T的每个前缀,它最长 ...

  8. 插入mysql失败,因为java数据类型是个实体类,加上.id就好了

    错误信息: ### Error updating database. Cause: java.sql.SQLException: Incorrect string value: '\xAC\xED\x ...

  9. 使用Eclipse创建动态的web工程

    使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...

  10. CMDB服务器管理系统【s5day89】:采集资产之整合资产

    1.业务逻辑单独写 1.代码目录结构 2.client.py from src.plugins import PluginManager class BaseClient(object): def p ...