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的caller,callee,call,apply
Apr 28 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
Node.js插件安装图文教程
May 06 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
网络资源
2006/10/09 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
javascript实现数独解法
2015/03/14 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Node 代理访问的实现
2019/09/19 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
社区七一党员活动方案
2014/01/25 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
小学生期末评语大全
2014/04/21 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
人才市场接收函
2015/01/30 职场文书
国王的演讲观后感
2015/06/03 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js