解決vue組件內前置路由守衛beforeRouteEnter無法獲取上下文this

問題描述

vue框架，只有在報名頁面報名成功，然后自動跳轉到訂單詳情，才彈出一個引流彈窗，其他情況均不彈出，我就想到使用vue

的組件內前置守衛beforeRouteEnter來實現。beforeRouteEnter （to,from,next）的參數to，from可以確認當前路由對象和上一

個路由對象，但是遇到了一個問題。beforeRouteEnter 無法獲取上下文this實例，這就很尷尬了。

問題解析

beforeRouteEnter (to,from,next) {

　　//在確認呈現此組件的路由之前調用。

　　//無權訪問“this”組件實例，

　　//因為調用這個守衛時還沒有創建！

}

在beforeRouteEnter時，頁面還沒有渲染，新進入組件還沒有被創建，無法獲取this實例

解決方法

可以通過向傳遞回調來訪問實例next。確認導航后，將調用該回調，並將組件實例作為參數傳遞給回調：

beforeRouteEnter (to, from, next) { next(vm => { // 通過“vm”訪問組件實例`
　　//可以通過vm.name去訪問data里面的name屬性，跟this.name一樣效果 }) }

請注意，這beforeRouteEnter是唯一支持將回調傳遞給的保護措施next。對於beforeRouteUpdate和beforeRouteLeave，this已經可用，因此不需要傳遞回調，因此不支持：

完整代碼

beforeRouteEnter (to, from, next) { next(vm => { 　if(from.meta.title == '報名頁面'） {
　　　　　//判斷是否從報名頁面過來，如果是顯示彈窗
　　　　　vm.isShow = true
　　　}
 })
}