beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave属性：

<template>
<div class="knowledge-container">
    <div class="items-block">
        <div class="item-head">beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave属性：</div>
        <div class="item-head">进入页面路由前，更新页面路由前和出页面路由前执行的操作</div>
        <div class="item-content">
            <button @click="updateRoute">更新</button>
            <button @click="backRoute">退出</button>
        </div>
    </div>
</div>
</template>
<script>
export default{
  name: 'knowledge',
  data () {
    return {
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log('进入页面')
    console.log('to', to)
    console.log('from', from)
    console.log('next', next)
    next()
  },
  beforeRouteUpdate (to, from, next) {
    console.log('更新页面')
    console.log('to', to)
    console.log('from', from)
    console.log('next', next)

    alert('更新页面')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('退出页面')
    console.log('to', to)
    console.log('from', from)
    console.log('next', next)
    alert('退出页面')
    next()
  },
  methods: {
    updateRoute () {
      this.$router.push({name: 'knowledge', query: {abc: '1212'}})
    },
    backRoute () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.knowledge-container{
  padding:20px;
  .items-block{
    box-shadow:1px 1px 1px 1px #ddd;
    .item-head{
        padding:10px;
        border-bottom:1px solid #ccc;
    }
    .item-content{
        padding:10px;
    }
  }
}
</style>

使用vue-property-decorator需要先注册后使用（效果一样）：

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])