视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
在vue中如何实现跳转到之前页面
2020-11-27 19:37:30 责编:小采
文档


本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

先说一下我们需要用到的几个API:

1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.name获得当前路由的名称。

2.router.replace:作用和router.push相同,不过它不会向history添加新纪录,而是替换当前的history记录。

由于大家的代码写的都不一样,我就不放我具体的实现代码,简单介绍一下思路:

1.用户点开链接后,跳转到的目标的路由页面,然后触发401,返回登录页面:

//401拦截
if(status == "401"){
 router.push("/login") 
}

2.我们可以在401拦截的时候将目标链接保存在url中:

if (status == 401) {
 //判断当前的路由是否是目标路由
 if(router.currentRoute.name == "target"){
 //跳转回login路由,并把目标路由的url路径保存在login的query中
 router.replace({
 name:"login",
 query: {redirect: router.currentRoute.fullPath}
 })
 }else{
 /* 普通401拦截直接返回到登录页面 */
 router.push('/login');
 }
 }

3.点击登录后使用url上保存的query直接跳转回目标页面

router.push({path:decodeURIComponent(url)});

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

vuex之详细介绍中文文档

纯js如何生成下拉列表

在vue中有关文件使用方式

在vue-cli webpack中如何引入jquery(详细教程)

下载本文
显示全文
专题