路由全局守卫

发布时间:2019-01-10 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了路由全局守卫脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

首先 创建路由配置 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,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.route.query.returnURL this.router.push({path:path?path:’/’}) } }

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

总结

以上是脚本之家为你收集整理的路由全局守卫全部内容,希望文章能够帮你解决路由全局守卫所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: