如何在 nuxt.js 中编写全局路由功能 [英] how to write global router-function in nuxt.js

问题描述

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

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

val route = new Router({路线:{[...]}})route.beforeEach(to,from,next){//做一些事情来验证}

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

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

请帮忙，谢谢:)

解决方案

您可以为 Nuxt 创建插件

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

导出默认值 ({ app }) =>{//每次路由改变时(也在初始化时触发)app.router.afterEach((to, from) => {//做一些事情来验证})}

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

插件:['~/plugins/route']

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

I am using Vue.js with Nuxt.js, but I got a problem in router's functions.

In the pure Vue, i can write in main.js like this:

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

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

And how to do the same in nuxt.js ? I can not find any file like main.js.

Also, all i know is to deal with the pages folder to achieve router, I can not set the redirect path

please help, thx :)

解决方案

You can create a plugin for Nuxt

create a plugins/route.js file:

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

and update your nuxt.config.js file:

plugins: ['~/plugins/route']

More details about Nuxt plugins: https://nuxtjs.org/guide/plugins

这篇关于如何在 nuxt.js 中编写全局路由功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！