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

Question

我正在使用 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文件夹来实现路由，无法设置重定向路径

请帮忙，thx :)

Answer 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

Answer 2

如果有人可能仍然感兴趣，可以像这样在 nuxt.config.js 中设置全局中间件：

router: { middleware: ['foo'] },

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

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

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

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

how to write global router-function in nuxt.js

vue.js

vue-router

nuxt.js