vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/5a28b74c10c98d0e654c1bce
2.vue使用vue-router beforEach实现判断用户登录跳转路由筛选:https://www.colabug.com/3306814.html
在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。
实现
本篇文章默认您已经会使用 webpack
或者 vue-cli
来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一下就好,相关文章非常多,这里就不再赘述了。 话不多说,直接上代码。 为了方便日后代码的可维护性,我把相关方法写在了一个新建的filter.js文件里
接下来进入filter.js文件中,首先引入vue-router: import router from "./router";
然后我们使用 router.beforEach
方法:
router.beforeEach((to, from, next) => {
//根据字段判断是否路由过滤
if (to.matched.some(record => record.meta.auth)) {
if (getToken() !== null) {
next()
} else {
//防止无限循环
if (to.name === 'login') {
next();
return
}
next({
path: '/login',
});
}
} else {
next()//若点击的是不需要验证的页面,则进行正常的路由跳转
}
});
beforEach其实是vur-router的钩子函数,可以理解为每个router跳转之前都会调用的一个方法,既然有before同理当然也有afterEach,这个我们以后再讲。
首先来解释下beforEach的三个参数:
- to:router即将进入的路由对象。
- from:当前导航正要离开的路由。
- next:一个function,一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next()
: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false)
: 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。 你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项,注意,next可以通过query传递参数。
next(error)
: (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
说明
好了,看到这里可能有些人还是没有理解,没关系,接下来我举个例子就可以明白了。
假设我们目前有三个路由:/home,/mine,/login
我们初始进入为/home
,这时候点击跳转/mine
,但是由于我们没有登录,所以会自动跳转到/login
在以上这种情况下,
to:代表着路由 /mine
,我们要进入的路由。
from:代表着路由 /home
,我们将要离开的路由。
注意,使用beforEach最后必须要调用 next()
,否则会报错,如果不传参数,我们就会成功进入到 /mine
,如果我们传递参数,例如 next('/login')
,那么我们在点击任何路由都会跳转到 /login
界面。
但是我们的需求是只有点击需要进行登录验证的页面才进行拦截跳转,因此,我们需要加一些判断条件来进行路由的筛选。
if (to.matched.some(record => record.meta.auth)) {
if (getToken() !== null) {
next()
}
}
这里的to就是上面讲的参数to, to.matched
是一个对象数组,里面有to指向路由的相关信息,例如:path,name,meta等等。
我们用该数组调用some()方法根据返回值 true
或者 false
来进行判断,所以我们要在router.js路由配置文件中为我们需要验证登录判断跳转的路由添加一个字段来作为判断条件
{
path: '/mine',
name: 'mine',
component: mine,
meta:{auth:true} //我们自己添加的字段
}
由于给路由添加了 meta:{auth:true}
,所以我们的 to.matched.some(record => record.meta.auth)
会返回 true
,这时我们就可以做登录判断了,我的项目是通过把token存入到 localstorage
来进行判断的, getToken()是我封装的一个获取 localstorage
方法。
if (getToken() !== null) {
next()//若token不为null,则进行路由跳转
}
如果没有token,我们下一步继续进行判断,也就是最终目的,进行路由拦截,跳转到登录页
else {
next({
path: '/login',
});
}
但是这时候我们会遇到新的问题,打开控制台会发现路由会无限的循环并最终崩溃,这是什么原因呢?仔细阅读上文红色加粗,我们可以理解为
next()
next({ path: '/login', });
也就是说beforeEach()必须调用next(),否则就会出现无限循环
next() 和 next('xxx') 是不一样的,区别就是前者不会再次调用router.beforeEach(),后者会。而由于我们没有token,所以在重新调用router.beforeEach()后,会再次进入到
else {
next({
path: '/login',
});
}
所以造成了无限循环,解决这个问题的方法也很简单,我们在 next({ path: '/login', });
之前增加一个判断条件
if (to.name === 'login') {
next();
return
}
如果我们to的定向路由 name == 'login'
,则执行 next();
并return终止代码运行。
以上就是通过router.beforEach方法进行路由拦截了,我们不仅仅可以只做登录判断,通过这个方法可以实现很多需求,只要是有关路由跳转的都可以,在下只是抛砖引玉,如果有哪里不对的地方或者有更好的方法可以直接在评论告诉我,非常感谢。
vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)的更多相关文章
- vue组件级路由钩子函数介绍,及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue 组件中的钩子函数 不能直接写this
export default { data(){ return { num: 18 } }, beforeRouteEnter(to, from, next){ next(vm=>{ vm.nu ...
- VUE温习:nextTick、$refs、嵌套路由、keep-alive缓存、is特性、路由属性用法、路由钩子函数
一.$nextTick 1.vue的dom执行异步更新,只要观察到数据变化,vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 2.vue.$nextTick(cb),数据发生变化,更新 ...
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- Vue源码后记-钩子函数
vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- vue教程2-01 vue生命周期、钩子函数
vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- C# 获取微信小程序access_token
/// <summary> /// 获取access_token /// </summary> /// <returns></returns> publ ...
- P3375 【模板】KMP字符串匹配——kmp算法
先上一波题目 https://www.luogu.org/problem/P3375 kmp模板 看了好久才想起来是个什么东西qwq #include<cstdio> #include&l ...
- pandas认识
import numpy as np import pandas as pd # pandas 主要是用来进行数据处理的库, # 里面不仅包含了数据处理.甚至还有 统计分析.相关计算,其内部封装了nu ...
- box-shadow 制作单边阴影效果,不影响其它边的效果
box-shadow 制作单边阴影效果,不影响其它边的效果: https://blog.csdn.net/u010289111/article/details/53171128 CSS 样式实现单边 ...
- 如何通过HTTP API 调取tushare的股票数据
长久以来,Tushare一直以固定的Python SDK方式为大家提供数据服务. 虽然在基于Python的数据分析和Python的量化策略开发很方便,但习惯用其他语言的同学们表示了“抗议”,于是在Tu ...
- 牛客网练习赛 2 烟花(概率dp)
题目传送门 烟花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K Special Judge, 64bit IO Format: %lld 题目 ...
- windows下查看端口占用以及关闭相应的进程
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...
- 简单认识php
1.输出语句: echo 'hello world'; 2.声明变量用 $ 符号 $uname = 'andy'; 3. php 拼接字符串用 点(.) //设置中文编码 header("c ...
- python 发送json数据操作实例分析 - python
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 本文实例讲述了python 发送json数据操作.分享给大家供大家参考,具体如下: # !/usr/bin/env py ...
- java 双重校验性volatile
A a = new A(); 上述可拆分为三个步骤: -1.分配地址 -2.初始化对象 -3.将 变量a 指向这个地址 在准时制生产方式(Just In Time简称JIT)时,可能发生指令重排: 在 ...