在nuxt.js框架下阻止路由跳转

前言

在nuxt.js框架中，是自带了路由处理的，但是它自带的路由功能并没有vue-router的功能强大。

例如我们的要做一个路由守卫，在路由发生跳转前做一些判断，如果判断不通过则不给路由跳转。

怎么做？

仅仅只用nuxt.js框架很难解决，但我们可以通过nuxt.js中的plugin插件系统引入vue-router。

 

解决

文件路径：src/plugins/router.js

export default ({ app ,store }) => {
  app.router.beforeEach((to, from, next) => {
    console.log(to, from)
    if (from.name === 'index') {
      console.log('路由暂时不能跳转');
    } else {
      next()
    }
  })

  app.router.afterEach((to, from) => {
    
  })
}

文件路径：nuxt.config.js

  plugins: [
    // ...省略
    'src/plugins/router',
  ],

 

这样，就可以使用vue-router中的强大的导航守卫功能了，用来补充nuxt.js框架无法解决的一些问题。