Vue如何实现登录后继续跳转指定页面 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要讲解了Vue如何实现登录后继续跳转指定页面,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

1,在路由器路由器下的指数。js的配置中,给需要拦截登录的页面的路由上加一个元:{loginRequest:真},其中loginRequest变量自己可以随意定义

2,在主要。js文件里面添加beforeEach钩子函数

<强>解释:

路由器。beforeEach(下),从=比;{}三个参数:

:即将要进入的目标路由对象

:当前导航正要离开的路由

:(函数函数)调用next()进行管道中的下一个钩子

next()无参进行下一个钩子函数

next({路径:& # 39;/xxx # 39;查询:{}})携带参数跳到xxx页面

3,登录页面登录。vue,登录完成后,跳到指定页面或首页

<强> vue实现登录后跳转到来源路由url

sessionStorage存储。路径来源的路由url,如果不是登录或者注册就拦截跳到登录页,如果是就放行

router.beforeEach(函数(下),从{ 　　　　如果(to.path !=& # 39;/登录# 39;,,to.path !=& # 39;/注册# 39;){ 　　sessionStorage.setItem(& # 39;上线# 39;,from.path)//储存来源路由　　警报(& # 39;请登录& # 39;) 　　下一个({ 　　路径:& # 39;/登录# 39; 　　}）　　其他}{ 　　next () 　　} 　　　　})

登录后判断sessionStorage中是否有存储来源路由,如果有就跳转到这个路由

//获取来源页路由　　var介绍人=sessionStorage.getItem(& # 39;上线# 39;); 　　如果(推荐人!=null) { 　　router.push美元。(引用) 　　其他}{ 　　这个。router.push美元(& # 39;/回家# 39; 　　}

看完上述内容,是不是对Vue如何实现登录后继续跳转指定页面有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。