vue.js 如何在nuxt.js中编写全局路由器函数

7jmck4yq  于 2023-11-21  发布在  Vue.js
关注(0)|答案(2)|浏览(163)

我正在使用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:)

gojuced7

gojuced71#

可以为Nuxt创建一个插件,可以添加全局路由器功能。这是一种扩展Nuxt应用路由器功能的有用方法。
首先,创建一个plugins/route.js文件:

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

字符串

// Nuxt >= 3.x
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']


更多关于plugins的信息:

bfhwhh0e

bfhwhh0e2#

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

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

字符串
然后在你的middleware/foo.js里你做任何事...

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

**请注意:**您不能将此用于静态站点(nuxt generate),因为中间件不会在页面加载时执行,而只会在随后的路由更改时执行。感谢@ProblemsOfSumit指出这一点。

相关问题