vueRouter

beforeEnter(to, from, next) 路由配置文件中

beforeRouteEnter(to, from, next) 模板文件中
不能访问组件实例this
但是可以传一个回调给next

beforeRouteEnter(to, from, next){
next(vm =>{
通过vm访问组件实例
}})

beforeRouteUpdate(to, from, next)
当前路由发生变化，该组件被复用时，对于一个大有动态参数的路径，由于会渲染同一个组件，这个狗子就在这个时候被调用，可以访问组件实例this

beforeRouteLeave(to, from, next)
当离开该组件时执行，可以访问组件实例this

注
三步走页面

• loading

• 空数据

• 数据展示

  <template>
  <div class="post">
  <div v-if="loading" class="loading">
  Loading...
  </div>
  
  <div v-if="error" class="error">
  {{ error }}
  </div>
  
  <div v-if="post" class="content">
  <h2>{{ post.title }}</h2>
  <p>{{ post.body }}</p>
  </div>
  </div>
  </template>

  export default {
  data () {
  return {
  loading: false,
  post: null,
  error: null
  }
  },
  created () {
  // 组件创建完后获取数据，
  // 此时 data 已经被 observed 了
  this.fetchData()
  },
  watch: {
  // 如果路由有变化，会再次执行该方法
  '$route': 'fetchData'
  },
  methods: {
  fetchData () {
  this.error = this.post = null
  this.loading = true
  // replace getPost with your data fetching util / API wrapper
  getPost(this.$route.params.id, (err, post) => {
    this.loading = false
    if (err) {
      this.error = err.toString()
    } else {
      this.post = post
    }
  })
  }
  }
  }