vue进入页面执行的钩子函数_vue router的钩子函数总结
模块一:全局导航钩子函数
1、vue router.beforeEach(全局前置守卫)
beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。
它的三个参数:
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法:next(参数或者空) ***必须调用,路由的控制参数,常用的有next(true)和next(false)
next(无参数的时候): 进行管道中的下一个钩子,如果走到最后一个钩子函数,那么 导航的状态就是 confirmed (确认的)
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
应用场景:可进行一些页面跳转前处理,例如判断需要登录的页面进行拦截,做登录跳转!!
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
//判断该路由是否需要登录权限
if (cookies('token')) {
//通过封装好的cookies读取token,如果存在,name接下一步如果不存在,那跳转回登录页
next()//不要在next里面加"path:/",会陷入死循环
}
else {
next({
path: '/login',
query: {redirect: to.fullPath}//将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next()
}
})
应用场景,进入页面登录判断、管理员权限判断、浏览器判断
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
// 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
role === 'admin' ? next() : next('/403');
}else{
// 简单的判断IE10及以下不进入富文本编辑器,该组件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器,请使用更高版本的浏览器查看', '浏览器不兼容通知', {
confirmButtonText: '确定'
});
}else{
next();
}
}
})
2、vue router.afterEach(全局后置守卫)
router.beforeEach 是页面加载之前,相反router.afterEach是页面加载之后 ,afterEach函数不用传next()函数,这类钩子主要作用于全局,
一般用来判断权限,以及以及页面丢失时候需要执行的操作
模块二:路由独享的守卫(路由内钩子)
你可以在路由配置上直接定义 beforeEnter 守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
这些守卫与全局前置守卫的方法参数是一样的。
模块三:组件内的守卫(组件内钩子)
1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当钩子执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
2. 路由钩子在实际开发中的应用场景
(一) 清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:
beforeRouteLeave (to, from, next) {
window.clearInterval(this.timer) //清除定时器
next()
}
(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转,结合vuex状态管理(dialogVisibility是否有保存)
beforeRouteLeave (to, from, next) {
//判断是否弹出框的状态和保存信息与否
if (this.dialogVisibility === true) {
this.dialogVisibility = false //关闭弹出框
next(false) //回到当前页面, 阻止页面跳转
}else if(this.saveMessage === false) {
alert('请保存信息后退出!') //弹出警告
next(false) //回到当前页面, 阻止页面跳转
}else {
next() //否则允许跳转
}
(三) 保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) {
localStorage.setItem(name, content); //保存到localStorage中
next()
}
vue进入页面执行的钩子函数_vue router的钩子函数总结相关推荐
- vue进入页面执行的钩子函数_vue的钩子函数
钩子函数 通过上述测试我们可以知道 在beforecreate阶段,对浏览器来说,整个渲染流程尚未开始或者说准备开始,对vue来说,实例尚未被初始化,data observer和 event/watc ...
- vue进入页面执行的钩子函数_vue中各选项及钩子函数执行顺序详解
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
- vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
- mounted钩子函数_vue中created钩子函数与mounted钩子函数的使用区别
1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理. 首先来看下官方解释,官方解释说created是在实例创建完成 ...
- mounted钩子函数_vue生命周期钩子函数的正确使用方式
先上图 vue的生命周期 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ 但是在前几天却遭遇了一个意外,我在mounted中获取后 ...
- vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
vue 刷新之后 嵌套路由不变 重新渲染页面的方法 解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
- vue刷新页面如何保证路由不变_vue通过路由实现页面刷新的方法
vue 开发微信商城项目, 需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转( ...
- vue 多页面应用例子_【微服务】137:Vue之生命周期钩子
今天是刘小爱自学Java的第137天. 感谢你的观看,谢谢你. 学习计划安排如下: Vue的深入学习,emm准确地说还不能算是深入学习,我有点高估自己的学习进度了. 本来打算两天时间做一个基础入门的, ...
最新文章
- 绿色信托任重道远 应建立补偿机制?
- STM32开发 -- IAP详解
- HoloLens开发手记- SpectatorView for iOS编译指南
- dll已加载但找不到入口点DLLRegisterServer
- 原子微型结构信息应用到局部图形信息存储的猜想
- 重学java基础第二十二课:IDEA安装
- ajax 五种状态,ajax的五种状态
- c语言实现shellcode转换工具
- 垂直的SeekBar:VerticalSeekBar
- duplicate symbols for architecture arm64的问题结决方法
- 自己整理的90分以上最新物联网技术导论期末选择填空大题总考点
- C++ 的万能头文件,你知道多少?
- 科普 | 到底什么是移动边缘计算?
- 计算机高级职称答辩ppt,专业技术职务任职资格评审答辩工程系列高级工程师PPT.pptx...
- Win10运行pip install image-similarity-measures失败的处理方式(GDAL和rasterio安装)
- 【OpenGL ES】纹理贴图
- Word2010如何从正文开始设置页码
- android 电商app组件化,APICloud AVM多端开发案例深度解析(一)--生鲜电商app开发
- ctf MISC 学习总结
- 【实例】使用jquery自带的slideToggle由上到下缓缓加载图片