vue-router钩子函数的使用,vue router钩子函数使用
本文主要介绍vue-router hook函数实现路由守护。对vue感兴趣的同学可以参考一下。
目录
全局挂钩函数路由专用的挂钩函数组件中的挂钩函数概述
概述
什么是路由守卫？路由卫士有点像ajax请求拦截器，就是在发送请求之前，拦截你，在发送请求之前做一些事情。同样，这里的路由守卫也是同样的意思；很简单的理解，在你进入路线之前，会先被拦下检查；这不是有点中学门口保安的意思吗？进来前先停，有学生证就进，没学生证就不让进；当然，路由卫士不只是在你进入之前阻止你，还有其他钩子函数用于其他操作；
Vue-router为我们提供了三种钩子函数来实现路由守卫：
1.全局钩子函数(beforeEach，afterEach)
2.路由独占挂钩功能(beforeEnter)
3.组件中的挂钩函数(beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave)
我们先来看看全局钩子函数：
全局钩子函数
每个之前：
BeforeEach接收三个参数，即to、from和next；To:传入的路由对象；From:正在离开的路由对象；接下来：路线的控制参数；
有四种方法可以调用next:
Next():一切正常。调用此方法转到下一个钩子；
下一步(假):取消路线导航，此时的网址显示即将出发的路线地址；
下一步(/login ):终止当前路线，进入新的路线导航(路线地址可自由指定)
Next(error):路由导航终止，错误将传递给router.onError()注册的回调；
一般来说，我们使用全局钩子来控制权限。比如用户在没有登录的情况下进入页面，跳转到登录页面，用户需要达到什么级别才能访问当前页面，属于页面权限控制，可以通过beforeEach钩子函数实现：
Main.js(我们通常在main.js中编写全局钩子函数):
//在路由前输入方法挂钩。
router.beforeEach((收件人，发件人，下一个)={
Console.log(to，在第一个参数之前)
Console.log(来自，在第二个参数之前)
Console.log(接下来，“在第三个参数之前”)
/
至目的地路线
从源路线
下一步跳到下一条路线
*/
//这里暂时用local，storange简单模拟一下认证权限。
if(window . localstorange . getitem( token ){
//如果存在，直接跳转到对应的路由。
next()；
}否则{
//如果不存在，跳转到登录页面
下一步(/log in )；
}
});
每次之后：
AfterEach和beforeEach一样，属于全局守护钩子，在main.js中调用；其中AfterEach比beforeEach少一个next参数；
From:正在离开的路由对象；
AfterEach()我们一般用它来重置页面的滚动条位置：
如果我们有一个很长的页面，滚动到某个位置再跳转，那么新页面的滚动条位置会停留在上一页的位置；这时，我们可以使用afterEach来重置：
//全局路由更改后挂钩
router.afterEach((收件人，发件人)={
//将滚动条恢复到顶部
window.scrollTo(0，0)；
})
路由独享的钩子函数
beforeEneter:
顾名思义，路线排他性就是只有指定的路线才有这些挂钩功能。通常我们在路由配置文件中配置这种路由排他性挂钩功能，只能设置变更前的挂钩，不能设置变更后的挂钩。
const router=new VueRouter({
路线
});
常量路由=[
{
路径：“/page1”，
组件：第1页，
儿童：[
{
路径：“电话”，
组件：电话
},
{
路径：“计算机”，
组件：计算机
},
],
//路由独占钩子函数
beforeEnter:(收件人，发件人，下一个)={
console.log(到)；
console.log(来自)；
下一个(假)；
}
},
上面的代码理解为，钩子beforeEnter只有在输入/page1时才会触发，如果输入其他页面则不会触发；
组件内的钩子函数
beforeRouteEnter(收件人、发件人、下一个):
在路由进入之前调用，因为此时还没有创建vue实例，所以beforeEnter是唯一不能使用这个的钩子函数；
收件人：要输入的路由对象；
From:正在离开的路由对象；
下一步：路由控制参数
beforeRouteUpdate(收件人、发件人、下一个):
路由修改时调用，比如我们上一篇文章提到的动态路由传输。在这种情况下，我们的beforeRouteUpdate也会被调用；
收件人：要输入的路由对象；
From:正在离开的路由对象；
接下来：路由控制参数；
beforeRouteLeave(收件人、发件人、下一个):
当路由离开组件时调用；
收件人：要输入的路由对象；
From:正在离开的路由对象；
下一步：路由控制参数
注意：beforeRouteEnter在这个hook函数中不能使用这个，因为触发时vue实例还没有创建，而beforeRouteUpdate和beforeRouteLeave可以访问实例，因为触发这两个函数时实例已经创建好了；
在组件中调用hook函数时，我们通常在组件内部调用。例如：
模板
差异
H1 id=h1 主页/h1
p
Router-link to=/page1/phone 手机/router-link
路由器链接到=/page1/computer 计算机/路由器链接
/p
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
//在路由进入之前调用
beforeRouteEnter(收件人，发件人，下一个){
window . document . title= Welcome ；
next()；
},
//当路由被修改时调用
beforeRouteUpdate(收件人，发件人，下一个){
},
//当路线离开时调用
beforeRouteLeave(收件人、发件人、下一个){
},
data () {
返回{
消息：“我是第1页组件”
}
},
}
/脚本
以上就是vue-router hook函数实现路由守护的细节。更多关于vue-router路由卫士的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。