如何在 nuxt.js 中编写全局路由器功能

Posted 2023-02-22

【中文标题】如何在 nuxt.js 中编写全局路由器功能

【英文标题】：how to write global router-function in nuxt.js

【发布时间】：2018-01-12 13:11:55

【问题描述】：

我正在将 Vue.js 与 Nuxt.js 一起使用，但路由器的功能出现问题。

在纯Vue中，我可以这样写main.js：

val route = new Router(
   routes:
      [...]
   
)

route.beforeEach(to,from,next)
    //do something to validate

如何在 nuxt.js 中做同样的事情？我找不到像main.js 这样的文件。

另外，我只知道处理pages文件夹来实现路由器，我无法设置重定向路径

请帮忙，谢谢 :)

【参考方案1】：

你可以为 Nuxt 创建一个插件

创建一个plugins/route.js 文件：

export default ( app ) => 
   // Every time the route changes (fired on initialization too)
   app.router.afterEach((to, from) => 
     //do something to validate
   )

并更新您的nuxt.config.js 文件：

plugins: ['~/plugins/route']

更多关于 Nuxt 插件的详细信息：https://nuxtjs.org/guide/plugins

【讨论】：

@JackyWong 你是如何使用中间件的？

对这个有用的 sn-p 代码非常感谢。我试图为此制作一个中间件

【参考方案2】：

如果有人仍然感兴趣，可以在nuxt.config.js 中设置全局中间件，如下所示：

router:  middleware: ['foo'] ,

然后在你的middleware/foo.js 你做任何事......

export default function( route, from, store, redirect ) 

注意：您不能将其用于静态站点（nuxt generate），因为中间件不会在页面加载时执行，而只会在后续路由更改时执行。感谢@ProblemsOfSumit 指出这一点。

【讨论】：

我猜如果你使用SPA模式，你没有中间件，对吧？

供以后参考：您可以在SPA模式下使用中间件。对于 SPA，它仅在客户端执行。有关所有问题，请参见 github 上的讨论：github.com/nuxt/nuxt.js/issues/2653

对于静态站点，不能使用中间件，因为它们不会在页面加载时执行，只会在后续路由更改时执行。

如果您直接重新加载任何路由，它们也不会被调用

nuxt 插件和路由器中间件有什么区别，据我所知，它们似乎做同样的事情？