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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
动态加载jQuery的方法
Jun 16 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
webpack配置sass模块的加载的方法
Jul 30 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
使用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
DOMXML函数笔记
2006/10/09 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
js 编写规范
2010/03/03 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
[jQuery] 事件和动画详解
2019/03/05 jQuery
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
五四演讲稿范文
2014/09/03 职场文书
民事调解书范文
2015/05/20 职场文书
电话营销开场白
2015/05/29 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python