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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
js实现随机抽奖
Mar 19 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python删除过期文件的方法
2015/05/29 Python
机器学习python实战之决策树
2017/11/01 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python3实现点餐系统
2019/01/24 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
技校毕业生自荐信
2014/06/03 职场文书
公司年会主持词范文!
2019/05/07 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android