nuxt.js的导航守卫

2023-03-13,,

一、使用router.js 

  重构项目时还行使用原来的router.js也是可以的,需要下载插件惊醒配置,这时候vue-cli中怎么用,nuxt中就怎么使用导航守卫,几乎一样

二、使用nuxt.js

  1. 中间件:middleware

   a>全局的

    1、在nuxt.config.js中进行配置 (只要修改nuxt,config,js配置文件要就重启项目,)

      router:{

        middleware:'js文件  

      }

    2、新建middleware/js文件

      export default ({ store,route,redirect,params,query,req,res})=>{

        在这里面进行判断

      }

   b>局部

    直接在组件内使用就可以。新建js文件

     export default {

        middleware:'js文件

     }

    或者

     export default {

      middleware(){

        直接写逻辑  

      }

     }

  2.插件 plugins 全局的

    1、nuxt,config,js进行配置

      plugins :[

        '~plugins/router.js'

      ]

    2、在根目录中新建plugins/router.js文件

      export default( {app} )=>{

        app.router.beforeEache((to,from,next)=>{

          在这里面写逻辑

          next();

        })

      }

nuxt.js的导航守卫的相关教程结束。

《nuxt.js的导航守卫.doc》

下载本文的Word格式文档,以方便收藏与打印。