vue-router 实现导航守卫(路由卫士)的实例代码


Posted in Javascript onSeptember 02, 2018

导航守卫

导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫

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

对此,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 完之前一直处于 等待中。

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

•to: Route: 即将要进入的目标 路由对象

•from: Route: 当前导航正要离开的路由

•next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

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;

总结

以上所述是小编给大家介绍的vue-router 实现导航守卫(路由卫士)的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 #Javascript
修改vue+webpack run build的路径方法
Sep 01 #Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 #Javascript
You might like
yii操作session实例简介
2014/07/31 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python对文件操作知识汇总
2016/05/15 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
英国航空官网:British Airways
2016/09/11 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
工商治理实习生的自我评价
2014/01/15 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
机关保密工作承诺书
2015/05/04 职场文书
新兵入伍决心书
2015/09/22 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技