纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

有梦想的咸鱼前端   2021-04-25 我要评论
想了解vue-router钩子函数实现路由守卫的相关内容吗,有梦想的咸鱼前端在本文为您仔细讲解vue-router路由守卫的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,router,vue,路由守卫,下面大家一起来学习吧。

概述

何为路由守卫?路由守卫有点类似于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参数;

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>    


相关文章

猜您喜欢

  • Java 迷宫游戏 Java实现的迷宫游戏

    想了解Java实现的迷宫游戏的相关内容吗,richenyunqi在本文为您仔细讲解Java 迷宫游戏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,游戏,Java,迷宫游戏,下面大家一起来学习吧。..
  • 理解Vuex 一文轻松理解Vuex

    想了解一文轻松理解Vuex的相关内容吗,有梦想的咸鱼前端在本文为您仔细讲解理解Vuex的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vuex,模式,vuex,学习,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.tdtxt.cn 【土豆下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式