Vue生命周期和beforeRouteEnter理解

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上的内容。