在vue中使用組件內守衛(wèi)，在切換路由的時候并沒有觸發(fā)其守衛(wèi)方法
vue代碼如下

<template>
<div>
<div>
<router-link to="/beforeone">beforeone</router-link>
<router-link to="/beforetwo">beforetwo</router-link>
<router-link to="/beforethree">beforethree</router-link>
</div>
<div>
<router-view :page="post">
</router-view>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Beforeone from './beforeone.vue'
import Beforetwo from './beforetwo.vue'
import Beforethree from './beforethree.vue'
Vue.use(VueRouter)
const router=new VueRouter({
    routes:[
       {
          path:'/beforeone',
          component:Beforeone,
          props:{id:'one'}
       },
       {
          path:'/beforetwo',
          component:Beforetwo,
          props:{id:'two'}
       },
       {
          path:'/beforethree',
          component:Beforethree,
          props:{id:'three'}
       }
    ]
})
export default{
    name:'daohangbefore',
    data(){
      return{
       loading:false,
       post:null
    }
    },
    router,
    beforeRouteEnter(to,from,next){
    console.log(to.params.id)
        next()
    },
    beforeRouteUpdate(to,from,next){
        console.log(to.params.id)
        next()
    },
    beforeRouteLeave(to, from, next) {
    console.log(' beforeRouteLeave !', this)
    const answer = window.confirm('確認離開？')
    answer ? next() : next(false)
    }
}
</script>

引入的組件例如：

<template>
<div>
<p>two</p>
</div>
</template>
<script>
export default{
    name:"beforetwo",
    props:{
    page:Object
    }
}
}
</script>

在瀏覽器中切換組件，并沒有報錯，但是也沒有觸發(fā)相應的守衛(wèi)事件（控制臺中沒有輸出任何東西），請問這是為什么呢？