1、beforeRouteEnter(to,from,next)

beforeRouteEnter 函数内部 this 是undefined,这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象,如:next( (vm)=>{} ),参数vm就是组件的实例化对象。

beforeRouteEnter (to, from, next) {
    if (to.meta.needLogin && to.meta.mustAgent) {
      next(vm => {
        vm.needLogin = true
        vm.mustAgent = true
      })
    } else if (to.meta.needLogin || to.meta.mustAgent) {
      next(vm => { to.meta.needLogin ? vm.needLogin = true : vm.mustAgent = true })
    } else {
      next()
    }
  }

to参数如下

2、beforeRouteLeave 的三个参数分别是
1、to:要去的页面
2、from: 本页面地址
3:next 下一步

** 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

2、数据对象data:初始化属性,响应数据变化,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。

3、计算属性computed: 将function内return的值赋值在html的DOM上,computed内的function也只执行一次。computed具有缓存能力,仅当function内涉及到Vue实例绑定的data的值的改变,function才会重新执行,并修改DOM上的内容。

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐