using in-component guards in vue does not trigger the guard method when switching routes
vue code is as follows
<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>introduced components for example:
<template>
<div>
two
</div>
</template>
<script>
export default{
name:"beforetwo",
props:{
page:Object
}
}
}
</script>switching components in the browser does not report an error, but does not trigger the corresponding guard event (nothing is output in the console). Why?