vue-router钩子函数实现路由守卫
接上一篇,我们一起学习了vue路由的基本使用以及动态路由、路由嵌套以及路由命名等知识,今天我们一起来学习记录vue-router的钩子函数实现路由守卫;
何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路由守卫意思差不多;简单理解为就是你在进路由之前,首先把你拦住,对你进行检查;这是不是有点中学门口的保安?进来之前拦住,有学生证就进,没有学生证就不让进;当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他的钩子函数进行其他操作;
vue-router一共给我们提供了三大类钩子函数来实现路由守卫:
1、全局钩子函数(beforeEach、afterEach)
2、路由独享的钩子函数(beforeEnter)
3、组件内钩子函数(beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave)
首先我们先来看一下全局钩子函数:
全局钩子函数:
beforeEach:
beforeEach一共接收三个参数,分别是to、from、next;to:即将进入的路由对象;from:正要离开的路由对象;next:路由的控制参数;
next一共有四种调用方式:
next():一切正常调用这个方法进入下一个钩子;
next(false):取消路由导航,这时的url显示的是正要离开的路由地址;
next('/login'):当前路由被终止,进入一个新的路由导航(路由地址可以自由指定)
next(error):路由导航终止并且错误会被传递到router.onError()注册过的回调中;
我们一般是用全局钩子来控制权限,像什么进页面没有登录就跳登录页,需要用户达到什么级别才能访问当前页面都是属于页面权限控制,都是可以通过beforeEach钩子函数来实现:
main.js(全局钩子函数我们一般是在main.js中进行书写):
// 进入路由前方法勾子
router.beforeEach((to, from, next) => {
console.log(to, '前置第一个参数')
console.log(from, '前置第二个参数')
console.log(next, '前置第三个参数')
/
to 目标路由
from 源路由
next 跳转到下一个路由
*/
//这里暂时用local、storange来简单模拟验证权限
if (window.localstorange.getItem("token")) {
// 如果存在,则直接跳转到对应路由
next();
} else {
// 如果不存在,则跳转到登录页
next('/login');
}
});
AfterEach:
AfterEach和beforeEach一样都是属于全局守卫钩子,都是在main.js中进行调用;其中AfterEach比beforeEach少一个next参数;
to:即将要进入的路由对象;
from:正要离开的路由对象;
afterEach()我们一般用来重置页面滚动条位置:
假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面的滚动条位置就会在上一个页面停留的位置;这个时候我们就可以利用afterEach进行重置:
//全局路由改变后钩子
router.afterEach((to, from) => {
//将滚动条恢复到最顶端
window.scrollTo(0, 0);
})
路由独享的钩子函数:
beforeEneter:
路由独享顾名思义就是指定的路由才有这些钩子函数,通常这类路由独享的钩子函数我们是在路由配置文件中进行配置,只能设置改变前的钩子,不能设置改变后的钩子
const router=new VueRouter({
routes
});
const routes=[
{
path:'/page1',
component:page1,
children: [
{
path: "phone",
component: phone
},
{
path: "computer",
component: computer
},
],
//路由独享的钩子函数
beforeEnter:(to,from,next)=>{
console.log(to);
console.log(from);
next(false);
}
},
上述代码理解为只有进入/page1才会触发beforeEnter这个钩子,如果进入其他页面,是不触发的;
组件内的钩子函数:
beforeRouteEnter(to,from,next):
在路由进入前调用,因为此时的vue实例还没有创建,所以beforeEnter是唯一一个不能使用this的钩子函数;
to:即将要进入的路由对象;
from:正要离开的路由对象;
next:路由控制参数
beforeRouteUpdate(to,from,next):
在路由发生修改的时候进行调用,比如我们上一篇文章讲到的动态路由传参,这种情况我们的beforeRouteUpdate也是会被调用的;
to:即将要进入的路由对象;
from:正要离开的路由对象;
next:路由控制参数;
beforeRouteLeave(to,from,next):
在路由离开该组件时调用;
to:即将要进入的路由对象;
from:正要离开的路由对象;
next:路由控制参数
注意:beforeRouteEnter因为触发的时候vue实例还没有创建,所以这个钩子函数中不能使用this,而beforeRouteUpdate和beforeRouteLeave都是可以访问到实例的,因为当这两个函数触发的时候实例都已经被创建了;
当调用组件内的钩子函数的时候,我们通常是在组件内部进行调用,举个例子:
<template>
<div>
<h1 id="h1">主页</h1>
<p>
<router-link to="/page1/phone">手机</router-link>
<router-link to="/page1/computer">电脑</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
//路由进入前调用
beforeRouteEnter (to, from, next) {
window.document.title = "欢迎";
next();
},
//路由修改时调用
beforeRouteUpdate(to,from,next){ },
//路由离开时调用
beforeRouteLeave(to,from,next){ },
data () {
return {
msg: "我是page1组件"
}
},
}
</script>
vue-router钩子函数实现路由守卫的更多相关文章
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue之router钩子函数
模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- vue - 过滤器-钩子函数路由
一.关于路由 1.使用vue router 本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染 <!DOCTYPE html> <html la ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- vue的生命周期和路由守卫
组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有 ...
- vue-(过滤器,钩子函数,路由)
1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...
- vue学习(9)-路由守卫
全局守卫 你可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... }) router.beforeEach(( ...
随机推荐
- The 3n + 1 problem UVA - 100
3n+1问题 PC/UVa IDs: 110101/100 Popularity: A Success rate: low Level: 1 测试地址: https://vjudge.net/prob ...
- rocketMQ部署
rocketMQ部署(单机) 1. 环境: CentOS7 64 & JDK1.8+ 64 & 用户:www 2. 下载binary文件包: ...
- 微服务架构 - 网关 Spring Cloud Gateway
Spring Cloud Gateway 工作原理 客户端向 Spring Cloud Gateway 发出请求,如果请求与网关程序定义的路由匹配,则将其发送到网关 Web 处理程序,此处理程序运行特 ...
- jq ajax传递json对象到服务端及contentType的用法
目录 0.一般情况下,通过键值对的方式将参数传递到服务端 1.ajax 传递复杂json对象到服务端 2.content-Type 对asp.net mvc项目的重要性 0.一般情况下,通过键值对的方 ...
- Java Builder 模式,你搞明白了么?
Builder 模式定义 Builder 模式中文叫作建造者模式,又叫生成器模式,它属于对象创建型模式,是将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.建造者模式是一步一步 ...
- [企业微信通知系列]Jenkins发布后自动通知
一.前言 最近使用Jenkins进行自动化部署,但是部署后,并没有相应的通知,虽然有邮件发送通知,但是发现邮件会受限于接收方的接收设置,导致不能及时看到相关的发布内容.而由于公司使用的是企业微信,因此 ...
- openSession 与 getCurrentSession的区别
1.openSession 每一次获得的是一个全新的session对象,而getCurrentSession获得的是与当前线程绑定的session对象 package cn.kiwifly.view; ...
- 听说你不会调参?TextCNN的优化经验Tricks汇总
前言:本篇是TextCNN系列的第三篇,分享TextCNN的优化经验 前两篇可见: 文本分类算法TextCNN原理详解(一) TextCNN代码详解(附测试数据集以及GitHub 地址)(二) 调优模 ...
- CodeForces - 697C-Lorenzo Von Matterhorn(有点像LCA,原创
传送门: CodeForces - 697C 原创--原创--原创 第一次自己A了一道感觉有点难度的题: 题意:在一个类似于二叉树的图上,1 : u ,v,w 表示从u到v的所以路都加上w的费用: 2 ...
- Codefroces 920F SUM and REPLACE(线段树)
SUM and REPLACE 题意:给你n个数,进行m次操作,分别是将区间[l,r]内的所有数替换成自己的因子数 和 对区间[l,r]进行求和. 题解:可以发现2的因子个数还是2,1的因子个数还是1 ...