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 相关文章推荐
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
关于this和self的使用说明
2010/08/01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
PyQt5 多窗口连接实例
2019/06/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
考博自荐信
2013/10/25 职场文书
自我鉴定范文
2013/11/10 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
Golang Web 框架Iris安装部署
2022/08/14 Python