vue-router如何取到vuex裡面的狀態，來決定是否跳轉？

使用vue-cli構建的項目，vue-router的beforeEach方法裡面如何獲取到vuex的登錄狀態來決定跳轉，難道每次跳轉的判斷都要寫在組件裡面，不通過再跳回去？

謝邀。。

router.beforeEach(function (transition) {
//這樣可以獲取到根實例
vm = transition.to.router.app.$root
// 假設這裡 有一個vuex getter isLogin 來表示登陸狀態
if (vm.isLogin) {
transition.next()
} else {
// 其他的。。。
}
})


「難道每次跳轉的判斷都要寫在組件裡面，不通過再跳回去？」&<——不是的

根據官方文檔導航鉤子 · GitBook，有三種方式可以藉助vuex狀態攔截vue-router路由：

1.全局鉤子

router.beforeEach((to, from, next) =&> {
// ...
})


2.單個路由獨享的鉤子

routes: [
{
path: "/foo",
component: Foo,
beforeEnter: (to, from, next) =&> {
// ...
}
}]


3.組件內的勾子

beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當鉤子執行前，組件實例還沒被創建
}


推薦方法1、2，情況複雜時，1+2。

其中 next 方法決定了你是進入（本來就打算去的）下一個導航，還是中斷這個操作，還是跳到其他新的導航。

可以列印一下router.app.$options.store，可以看到對象裡面你已經創建的Vuex實例，包括state、action、getters、mutations。代碼如下：

router.beforeEach((to, from, next) =&> {

console.log(router.app.$options.store)

router.app.$options.store.dispatch("actionName")

router.app.$options.store.state.stateName

next()

})

首先不能用this來訪問vuex但是你在創建的時候可以用全局變數處理

根據vuexExpress來處理你的vuex