路由全局守卫

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
首先 创建路由配置 const router = new VueRouter({…})然后注册一个全局的前置守卫 router.beforeEach((to,from,next)=>{…})每个守卫方法接受三个参数:to :Route : 即将要进入目标 路由对象from:Route : 当前导航正要离开的路由next:Function:一下通过一个cli中的实例来进行说明全局守卫的作用声明个函数 下面用的...

首先 创建路由配置 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 详细见上文)

你可能在找的问题:

vue教程

Vue页面跳转动画效果的实现方法

百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下

vue教程

vue构建动态表单的方法示例

这篇文章主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

玩转vue的slot内容分发

这篇文章主要介绍了玩转vue的slot内容分发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

vue教程

vue 巧用过渡效果(小结)

这篇文章主要介绍了vue 巧用过渡效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

标题
返回顶部