首先 创建路由配置 const router = new VueRouter({…})
然后注册一个全局的前置守卫 router.beforeEach((to,from,next)=>{…})
每个守卫方法接受三个参数：
to ：Route : 即将要进入目标 路由对象
from：Route : 当前导航正要离开的路由
next：Function:

一下通过一个cli中的实例来进行说明全局守卫的作用
声明个函数 下面用的
2.获取设置的sessionStorage
const isLoged = () =>{
return sessionStorage.getItem(‘loged’)
}
首先注册一个全局守卫 在 index.js中（
const router = new Router({routes})
router.beforeEach((to,from,next)=>{
3.判断 如果给路由设置的meta.auth有没有 如果有的话就判断 sessionStorage有没有 如果有就跳转路由 如果没 就跳到 login页面 同时用query传递URL地址中可见的参数 to.fullpath也就是刚才输入的没有跳转的页面的地址
if(to.matched.some(route=>route.meta.auth)){
isLoged() ? next() : next({path:’/login’,query:{returnURL: to.fullpath}})
}else {
next()
}
})
）
上文是全局守卫的设置 以下是组件中对应全局守卫的设置
methods:{
1.login函数得由组件中的事件调用当点击按钮时调用login函数 设置sessionStorage
login(){
sessionStorage.setItem(‘loged’,true)
4.如果点击了按钮 那么就会跳转到刚才输入的没有跳转到的页面 如果正常输入就会跳转到首页
const path = this.$route.query.returnURLthis.$router.push({path:path?path:’/’})
}
}

想要在cli中运用全局守卫的步骤
1.首先按照 vue-cli生成一个cli框架
2.在components文件夹中生成组件
3.在index.js文件中配置路由组件 并引入组件（也可以单独设置一个routes.js在其中引入组件 并在数组中进行路由配置 并导出 然后在index.js中接收 并在index中再生成一个路由配置对象 并把导入的路由跟数组配置的文件模块放进去 再给路由配置对象.beforeEach 详细见上文）

作者：前端阿龙

链接：https://blog.csdn.net/weixin_42790916/article/details/81631676

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。