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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Javascript模拟实现new原理解析
2020/03/03 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
2016师德师风学习心得体会
2016/01/12 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
详解Redis主从复制实践
2021/05/19 Redis
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP