• 售前

  • 售后

热门帖子
入门百科

vue-router钩子函数实现路由守卫

[复制链接]
成圣 显示全部楼层 发表于 2021-10-26 13:39:24 |阅读模式 打印 上一主题 下一主题
目录


  • 概述
  • 全局钩子函数
  • 路由独享的钩子函数
  • 组件内的钩子函数

概述

作甚路由保卫?路由保卫有点雷同于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中进行誊写):
  1. // 进入路由前方法勾子
  2. router.beforeEach((to, from, next) => {
  3.   console.log(to, '前置第一个参数')
  4.   console.log(from, '前置第二个参数')
  5.   console.log(next, '前置第三个参数')
  6.   /
  7.     to 目标路由
  8.     from 源路由
  9.     next 跳转到下一个路由
  10.   */
  11. //这里暂时用local、storange来简单模拟验证权限
  12.   if (window.localstorange.getItem("token")) {
  13.     // 如果存在,则直接跳转到对应路由
  14.      next();
  15.   } else {
  16.     // 如果不存在,则跳转到登录页
  17.     next('/login');
  18.   }
  19. });
复制代码
AfterEach:
AfterEach和beforeEach一样都是属于全局保卫钩子,都是在main.js中进行调用;其中AfterEach比beforeEach少一个next参数;
from:正要离开的路由对象;
afterEach()我们一样平常用来重置页面滚动条位置:
假如我们有一个页面很长,滚动后其中的某个位置后跳转,这时新的页面的滚动条位置就会在上一个页面停顿的位置;这个时间我们就可以使用afterEach进行重置:
  1. //全局路由改变后钩子
  2. router.afterEach((to, from) => {
  3.   //将滚动条恢复到最顶端
  4.   window.scrollTo(0, 0);
  5. })
复制代码
路由独享的钩子函数

beforeEneter:
路由独享顾名思义就是指定的路由才有这些钩子函数,通常这类路由独享的钩子函数我们是在路由配置文件中进行配置,只能设置改变前的钩子,不能设置改变后的钩子
  1. const router=new VueRouter({
  2.     routes
  3. });
  4. const routes=[
  5.     {
  6.         path:'/page1',
  7.         component:page1,
  8.         children: [
  9.             {
  10.                 path: "phone",
  11.                 component: phone
  12.             },
  13.             {
  14.                 path: "computer",
  15.                 component: computer
  16.             },
  17.         ],
  18. //路由独享的钩子函数
  19.         beforeEnter:(to,from,next)=>{
  20.             console.log(to);
  21.             console.log(from);
  22.             next(false);
  23.         }
  24.     },
复制代码
上述代码明白为只有进入/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都是可以访问到实例的,因为当这两个函数触发的时间实例都已经被创建了;
当调用组件内的钩子函数的时间,我们通常是在组件内部进行调用,举个例子:
  1. <template>
  2.     <div>
  3.         <h1 id="h1">主页</h1>
  4.         <p>
  5.             <router-link to="/page1/phone">手机</router-link>
  6.             <router-link to="/page1/computer">电脑</router-link>
  7.         </p>
  8.         <router-view></router-view>
  9.     </div>
  10. </template>
  11. <script>
  12.     export default {
  13.     //路由进入前调用
  14.   beforeRouteEnter (to, from, next) {
  15.     window.document.title  = "欢迎";
  16.     next();
  17.   },
  18.     //路由修改时调用
  19.   beforeRouteUpdate(to,from,next){
  20.   },
  21.    //路由离开时调用
  22.   beforeRouteLeave(to,from,next){
  23.   },
  24.         data () {
  25.             return {
  26.                 msg: "我是page1组件"
  27.             }
  28.         },
  29.     }
  30. </script>   
复制代码

以上就是vue-router钩子函数实现路由保卫的详细内容,更多关于vue-router路由保卫的资料请关注草根技术分享其它相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作