鍍金池/ 問(wèn)答/C++  HTML/ vue-router 組件內(nèi)守衛(wèi)beforeRouteEnter觸發(fā)了而befo

vue-router 組件內(nèi)守衛(wèi)beforeRouteEnter觸發(fā)了而beforeRouteLeave沒(méi)有觸發(fā)

我在.vue文件中：

export default {
  name: 'SomeName',
  beforeRouteLeave(to, from, next) {
    console.log(' beforeRouteLeave !', this)
  },
  beforeRouteEnter(to, from, next) {
    console.log(' beforeRouteEnter !')
  }
}

但是在進(jìn)入路由的時(shí)候守衛(wèi)beforeRouteEnter觸發(fā)了而beforeRouteLeave沒(méi)有觸發(fā)，不知道是不是我的使用姿勢(shì)不對(duì)呢

環(huán)境：vue: 2.5.16,Chrome65

回答
編輯回答
風(fēng)清揚(yáng)

因?yàn)槟氵M(jìn)入后沒(méi)有再離開(kāi)(next());
當(dāng)然也就沒(méi)有再執(zhí)行beforeRouteLeave的機(jī)會(huì)了

2018年5月23日 03:47
編輯回答
巷尾

經(jīng)過(guò)我的實(shí)驗(yàn)之后，發(fā)現(xiàn)是我的錯(cuò)...

在路由守衛(wèi)中需要調(diào)用next()才會(huì)進(jìn)入路由，否則beforeRouteEnter中如果沒(méi)有next(),雖然會(huì)執(zhí)行守衛(wèi)的內(nèi)容，但是不能進(jìn)入路由，正確的寫(xiě)法是

export default {
  name: 'SomeName',
  beforeRouteLeave(to, from, next) {
    console.log(' beforeRouteLeave !', this)
    const answer = window.confirm('確認(rèn)離開(kāi)？')
    answer ? next() : next(false)
  },
  beforeRouteEnter(to, from, next) {
    console.log(' beforeRouteEnter !')
    next()
  }
}
2017年10月28日 21:00