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({&nbsp; &nbsp; router,&nbsp; &nbsp; render(h) {&nbsp; &nbsp; &nbsp; &nbsp; return h(App, {});&nbsp; &nbsp; }});