vue全局钩子函数,监控路由

有些页面需要登录后才能访问,可以进行判断,如果需要登录就重定向

{

  path: '/hello',

  name: 'Dcoument',

  //不使用全局钩子函数监控路由的时候,可以对路由单个使用

  beforeEnter (to,from,next) {

    console.log('访问这个路由时会执行')

    next()

  }

  meta: {

    login: true,

    title: '头部标题'

  }

}

//路由进入之前

router.beforeEach((to,from,next) => {

  console.log('进入路由是‘)

  //next() //想进入路由必须调用一下这个方法

  //next(false) //是不让进入路由

  if (to.meta.login) {

    next('/login')

  } else {

    next()

  }

})

//路由进入之后

router.afterEach((to,from)) => {

  if (to.meta.title) {

    window.document.title = to.meta.title

  } else {

    window.document.title = '默认标题'

  }

}

除了上面两种,还可以在页面中进行使用

export default {

  data () {

    test: '改变前'

  },

  beforeCreate () {

    console.log('后执行')

  },

  beforeRouteEnter(to,from,next) {

    console.log('先执行')

    //在这里是访问不到this的,因为执行这个的时候,实例还没有被创建,可以用下面的方法

    next((vm) => {

      vm.test = '改变了'

    })

    

    //next()

  },

  beforeRouteUpdate (to,from,next) {

    console.log(''更新)

    next()

  },

  beforeRouteLeave (to,from,next) {//离开的时候

    next()//是否允许离开

  }

}

原文地址:https://www.cnblogs.com/qiuchuanji/p/8680808.html