Question

使用@ nuxt / router模块，我的路由中有一个router.js，我想在router.beforeEach ...中做一些事情，这取决于不同存储模块中的状态值。

我的商店文件夹如下所示： index.js，auth.js，language.js ...

Nuxt的新手，我很难理解如何在此路由文件中访问商店。尝试导入时出现错误，是否需要注入上下文？上下文已经可用了吗？更改商店设置并导出？使用中间件吗？

我想与 import {state} from '@/store/language' 然后使用state().activeLang获取一个值，但是当商店值更改时，该值不会更新，并且一次导入仅满足部分需求。

我的router.js文件如下所示：

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home/Home'
import Admin from '@/views/Admin/Admin'

Vue.use(Router)

//do I need to pass the context into this function ???

export function createRouter() {
  const router = new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home, name: 'home' },
      { path: '/admin', component: Admin, name: 'admin' },
    ]
  })

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

   // do stuff here...
   // e.g. check auth store if user is authenticated
   // e.g. get active language from language store

    return next();
  });

  return router
}```

Answer 1

在nuxt中，根据文档，您应该使用中间件而不是beforeEach：

使用中间件，您可以定义自定义功能，这些功能可以在呈现一个页面或一组页面（布局）之前运行。

，默认情况下，在中间件中编写函数时，您可以访问上下文对象作为第一个参数。这是根据文档调用中间件的方式：

在通用模式下，中间件将在服务器端被调用一次（在对Nuxt应用程序的第一个请求时，例如在直接访问应用程序或刷新页面时），而在客户端则被导航到其他路由。使用ssr：false，在两种情况下都将在客户端调用中间件。

您可以在三个位置编写中间件，然后nuxt将按以下顺序执行它们：

nuxt.config.js（按文件内的顺序）
匹配的布局
匹配的页面

您可以在下面的链接中查看文档，其中也提供了有关身份验证中间件的清晰示例。

Nuxt middleware documentation

Nuxt，访问router.js（@ nuxt / router）中的vuex存储

1 个答案: