beforeEnter调用 next 无作用问题 vue-router

Question

直接上代码

{
      path: '/logout',
      name: 'Logout',
      beforeEnter: (to, from, next) => {
        console.log('work') // 生效
        next(vm => {
          vm.$store.dispatch('logout') // 跑不进去
        })
      }
    },

不知道是不是小弟调用错误, 在beforeEnter 中的next 插了debug或console.log 动作都无法生效, 看样子是进程根本没跑进next中,
目前是想要只要router连到/logout这个path就会进行登出（$store.dispatch('logout')）
想请问哥们有没有什么看法,
或踩过这个坑的大大能给点指教

跪了

Answer 1

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

在路由配置里的beforeEnter，路由组件还没被激活，next 里面是获取不到 vm 的
你可以在Logout这个组件的beforeRouteEnter里面next(vm => {})

Answer 2

next里的参数只能是false,string,void,Location对象
其实你可以写在外面啊，实在想写到next里面的话可以写个IIEF：

next(
  (() => {
    console.log(xxx)
    return
    // 不跳转的话就写 return false
  })()
)

而且我觉得你在这拿不到vm
或者你可以在router.js里从main.js中引入根组件

import rootVm from '@/main.js'
然后写rootVm.$store.dispatch('logout')

Answer 3

在路由前置守卫中是拿不到进入的页面实例的，因为目标组件还没有被激活，
通常会这样处理：在目标组件页面：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

参照vue-router导航守卫