主要介绍一下vuerouter的几种钩子函数:

一、全局钩子(2个)

 每次跳转路由时都会执行这个钩子函数,由router调用

1、beforeEach(to,from,next)

  页面加载之前执行,有三个参数

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    from.name ? next({ name : from.name }) : next('/')
  } else {
    next()
  }
})

2、afterEach(to,from)

  页面加载之后执行,有两个参数,没有next

router.afterEach((to,from) => {
  console.log(to);//到达的路由
  console.log(from);//离开的路由
})

to:到哪个路由去

from:从哪个路由来

next:判断是否进入

  next有几种形式,一一解释一下

   1、next():可以跳转到目标路由

   2、next(false):不可以跳转,回到源路由

   3、next(/path):中断当前跳转路径,跳转到/path指定的路由

   4、next(error):当前跳转终止,并执行router.onError中的回调函数

小栗子:可以做一些页面跳转前的认证,对一些需要登录的页面进行拦截,跳转到登录页面

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()
    }
})

二、单个路由钩子(2个)

只要用于指定某个特定路由跳转时的逻辑,写在某个路由配置内部

1、beforeEnter()

2、beforeLeave()

const routes = [
    {
        path: '/home',
        component: Home
        
        beforeEnter;(to,from,next) => {
            console.log(to)
        }

        beforeLeave:(to,from,next) => {
            console.log(from)
        }
    }

三、组件内部钩子(3个)

在组件内使用

1、beforeRouterEnter()

2、beforeRouterLeave()

3、beforeRouterUpdate():下一次更新之前

beforeRouterEnter(to,from,next){
    console.log(to)
}
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`
 
  }

小栗子1:当页面中有需要保存的信息时,阻止页面进行跳转,让用户先保存信息

beforeRouteLeave (to, from, next) {
 //判断是否弹出框的状态和保存信息与否
 if (this.dialogVisibility === true) {
    this.dialogVisibility = false //关闭弹出框
    next(false) //回到当前页面, 阻止页面跳转
  }else if(this.saveMessage === false) {
    alert('请保存信息后退出!') //弹出警告
    next(false) //回到当前页面, 阻止页面跳转
  }else {
    next() //否则允许跳转
  }

小栗子2:在用户关闭页面之前保存信息到vuex或session里

beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}

注意他们的使用方式,仔细看

Logo

前往低代码交流专区

更多推荐