vue组件内守卫不触发

Question

在vue中使用组件内守卫，在切换路由的时候并没有触发其守卫方法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>在浏览器中切换组件，并没有报错，但是也没有触发相应的守卫事件（控制台中没有输出任何东西），请问这是为什么呢？

Answer 1

定义的router是需要传给new Vue()构造函数的，在你的new Vue()中,写成类似这样的试试。

const app = new Vue({

    router,

    render(h) {

        return h(App, {});

    }

});