vue2.0 实现导航守卫(路由守卫)


Posted in Javascript onMay 21, 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 完之前一直处于 等待中。

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

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。

下面写一个例子:

列举需要判断登录状态的“路由集合”,当跳转至集合中的路由时,如果“未登录状态”,则跳转到登录页面LoginPage;

当直接进入登录页面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;

总结

以上所述是小编给大家介绍的vue2.0 实现导航守卫(路由守卫),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
html中table数据排序的js代码
Aug 09 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 #Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 #Javascript
JS实现的文件拖拽上传功能示例
May 21 #Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 #Javascript
You might like
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
Laravel日志用法详解
2016/10/09 PHP
php创建类并调用的实例方法
2019/09/25 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
python如何修改装饰器中参数
2018/03/20 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python查看模块安装位置的方法
2018/10/16 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
公司应聘求职信
2014/06/21 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
中考学习决心书
2015/02/04 职场文书
同事去世追悼词
2015/06/23 职场文书