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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
JavaScript实现复制文章自动添加版权
Aug 02 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Python实现的选择排序算法示例
2017/11/29 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python小白学习包管理器pip安装
2020/06/09 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
英语演讲稿范文
2014/01/03 职场文书
市场部管理制度
2014/02/02 职场文书
高二物理教学反思
2014/02/08 职场文书
三方协议书
2015/01/27 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
活动总结书怎么写
2015/05/11 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python