vue2.0 实现导航守卫的具体用法(路由守卫)


Posted in Javascript onMay 17, 2018

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。

对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。

导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。

贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫:

const router = new VueRouter({ ... })

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

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

  1. to: Route: 即将要进入的目标 路由对象
  2. from: Route: 当前导航正要离开的路由
  3. next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    1. next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    2. next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    3. next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
    4. next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

下面写一个例子:

1.列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面LoginPage;

2.当直接进入登录页面LoginPage时,如果“已登录状态”,则跳转到首页HomePage;

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
Vue.use(Router)
const router = new Router({
 routes: [
  {
   path: '/', // 默认进入路由
   redirect: '/home'  //重定向
  },
  {
   path: '/login',
   name: 'login',
   component: LoginPage
  },
  {
   path: '/home',
   name: 'home',
   component: HomePage
  },
  {
   path: '/good-list',
   name: 'good-list',
   component: GoodsListPage
  },
  {
   path: '/good-detail',
   name: 'good-detail',
   component: GoodsDetailPage
  },
  {
   path: '/cart',
   name: 'cart',
   component: CartPage
  },
  {
   path: '/profile',
   name: 'profile',
   component: ProfilePage
  },
  {
   path: '**',  // 错误路由
   redirect: '/home'  //重定向
  },
 ]
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log('navigation-guards');
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态;当路由到nextRoute指定页时,跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
  if (!isLogin) {
   console.log('what fuck');
   router.push({ name: 'login' })
  }
 }
 // 已登录状态;当路由到login时,跳转至home 
 if (to.name === 'login') {
  if (isLogin) {
   router.push({ name: 'home' });
  }
 }
 next();
});

export default router;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
SVG实现时钟效果
Jul 17 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
通过一次报错详细谈谈Point事件
May 17 #Javascript
AngularJS日期格式化常见操作实例分析
May 17 #Javascript
Node 升级到最新稳定版的方法分享
May 17 #Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 #Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 #Javascript
JS 实现分页打印功能
May 16 #Javascript
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
You might like
用Simple Excel导出xls实现方法
2012/12/06 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
节能环保标语
2014/06/12 职场文书
授权收款委托书
2014/09/23 职场文书
化工见习报告范文
2014/10/31 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
手写实现JS中的new
2021/11/07 Javascript
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
volatile保证可见性及重排序方法
2022/08/05 Java/Android