正如此处所建议的，您可以做的是从商店所在的文件中导出商店并将其导入到routes.js 中。它将类似于以下内容：

你有一个store.js：

import Vuex from 'vuex'

//init store
const store = new Vuex.Store({
    state: {
        globalError: '',
        user: {
            authenticated: false
        }
     },
     mutations: {
         setGlobalError (state, error) {
             state.globalError = error
         }
     }
})

export default store

现在在routes.js 中，您可以拥有：

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from ./store.js

Vue.use(VueRouter)

//define routes
const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]

Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && ???) {
        // You can use store variable here to access globalError or commit mutation 
        next("/Login")
    } else {
        next()
    }
})

在main.js 中，您也可以导入store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import store from './store.js'

//init app
const app = new Vue({
    router: Router,
    store,
    template: '<app></app>',
    components: { App }
}).$mount('#app')

您可以使用router.app访问路由器注入的根 Vue 实例，然后通过router.app.$store.

const router = new Router({
    routes,
})

router.beforeEach((to, from, next) => {
    // access store via `router.app.$store` here.
    if (router.app.$store.getters('user')) next();
    else next({ name: 'login' });
})

这是API 参考。

视图 3

将router.app在Vue公司3去除，但使用路由器时，作为中说明你仍然可以将其添加迁移指南：

app.use(router)
router.app = app

我最终将 store 从 main.js 移到 store/index.js，并将其导入到 router.js 文件中：

import store from './store'

//routes

const routes = [
    { path: '/home', name: 'Home', component: Home },
    { path: '/login', name: 'Login', component: Login },
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true }
]    

//guard clause
Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) {
        store.commit("setGlobalError", "You need to log in before you can perform this action.")
        next("/Login")
    } else {
        next()
    }
})

将您的位置状态与应用程序的其余部分状态分开管理可能会使这样的事情比他们可能需要的更难。在 Redux 和 Vuex 中处理了类似的问题后，我开始使用module在我的 Vuex 商店中管理我的位置状态router。您可能想考虑使用这种方法。

在您的特定情况下，您可以观察 Vuex 存储本身内的位置何时发生变化，并分派适当的“重定向”操作，如下所示：

dispatch("router/push", {path: "/login"})

将位置状态作为 Vuex module进行管理比您想象的要容易。如果您想尝试一下，可以使用我的作为起点：

https://github.com/geekytime/vuex-router

按照@Saurabh 建议的方式导入商店。但是恕我直言，它给您的代码带来了某种解决方法的味道。

它有效，因为 Vuex 商店是一个单例。导入它会在你的组件、路由器和商店之间创建一个硬链接依赖。至少它使单元测试变得更加困难。vue-router 被解耦并像这样工作是有原因的，遵循其建议的模式并保持路由器与实际商店实例解耦可能会有回报。

查看 vue-router 的源代码，很明显有一种更优雅的方式可以从路由器访问商店，例如在beforeRouteEnter守卫中：

beforeRouteEnter: (to, from, next) => {
  next(vm => {
    // access any getter/action here via vm.$store
    // avoid importing the store singleton and thus creating hard dependencies
  })
}

2020 年 9 月 10 日编辑（感谢 @Andi 指出这一点）

beforeRouteEnter然后根据具体情况使用防护装置。我立即看到以下选项：

1. 在mixin 中声明守卫并有选择地在需要它的组件中使用它，而不是在全局守卫中过滤所需的组件
2. 在全局混合中声明守卫（注意声明的特殊性，例如需要在Vue.use(VueRouter);: here和here之后声明）