使用vue-router钩子函数怎么实现路由守卫

这篇文章给大家介绍使用Vue-router钩子函数怎么实现路由守卫，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

全局钩子函数

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>        <h2 id="h2">主页</h2>        <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钩子函数怎么实现路由守卫就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。