vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
如果页面A沿Y轴滚动一段距离,然后跳转到页面B;
在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置;
这样体验就很不好,所以我们要进行一些处理;
我的方法是:在路由守卫回调中,设置每次进入路由时,将window的scroll值设置为0;window.scroll(0, 0);代码如下
// 全局路由守卫
router.beforeEach((to, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
// A跳转到B,B页面停留在A页面的滚动位置;解决方法:将scrollTop设置为0
window.scroll(, );
// nextRoute: 设置需要路由守卫的路由集合
const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
let isLogin = global.isLogin; // 是否登录
// 未登录状态;当路由到nextRoute指定页时,跳转至login
if (nextRoute.indexOf(to.name) >= ) {
if (!isLogin) {
console.log('what fuck');
router.push({ name: 'login' })
}
}
// 已登录状态;当路由到login时,跳转至home
if (to.name === 'login') {
if (isLogin) {
router.push({ name: 'home' });
}
}
next();
});
就这样简单
vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法的更多相关文章
- Vue2.0一个login跳转实例
需要解决的问题:store存储登录状态Vue-Router导航钩子拦截路由Vue-Resource获取后台的数据需要判断登录返回的user源码参考原文地址 主要技术栈:Vuex + Vue-Resou ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- vue2.0路由(跳转和传参)经典介绍
声明式 <router-link :to="...">编程式router.push(...) router.push('home') / ...
- 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法
最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示 IOS端显示情况 Android端显示情况 解决方式: <t ...
- Android Studio 使用Intent实现页面的跳转(带参数)
不管是在APP,还是在网站中,页面之间的跳转都是很常见的,本文主要讲一下在APP中,如何通过Intent实现页面的跳转. 不带参数: 写在MainActivity页面的代码: Intent inten ...
- WebForm 回传后如何保持页面的滚动位置
转载自 http://www.cnblogs.com/renjuwht/archive/2009/06/17/1505000.html 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部.对 ...
- 移动端页面以rem为单位设置字体大小不生效解决方法
这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...
- VC++6.0文件关联问题的解决方法
最近我的电脑*.c文件关联失败,无法实现双击*.c打开vc++6.0,感觉特别不爽. 在经过自己的琢磨研究后,终于找到了解决方法. 特此分享下,希望可以帮到遇到同样问题的你. 核心内容: 1.& ...
- zf-关于邵阳市打印模块个别单号打印之后不会跳转到收费模块的BUG的解决方法
原因是 办结的时候 有个收费管理,里面会生成收费项目的单号,但是有1个单号是有问题的,没有关联到数据库里面的其他的表,所以打印之后不能跳转.如果跳转到收费模块 那么数据库里面的一个flag字段会变成9 ...
随机推荐
- H5混合开发二维码扫描以及调用本地摄像头
今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...
- Android异步消息机制
Android中的异步消息机制分为四个部分:Message.Handler.MessageQueue和Looper. 其中,Message是线程之间传递的消息,其what.arg1.arg2字段可以携 ...
- Java---实现邮件发送
实现发送邮件的发送必须有前提条件: 在qq邮件中开启POP3/SMTP服务,如下图所示(为本人邮件设置): 开启后会得到一个授权码.代码中会用到 需要的包: 百度网盘(包+源码):链接: https: ...
- 使用asyncsocket群聊
#import "ViewController.h" #import "AsyncSocket.h" @interface ViewController ()& ...
- Android中相机和相冊使用分析
Android中相机和相冊使用分析 欢迎转载,但请尊重原创(文章来自不易,转载请标明转载出处,谢谢) 在手机应用程序中,使用自带的相机拍照以及相冊选择喜欢的图片是最常见只是的用户需求,那么怎么合理使用 ...
- Android进程间通信与数据共享(ppt)
- 使用<jsp:include>,不想写死URL,动态生成URL的解决的方法
JSP中文件包括有2种方式,静态包括和动态包括. 静态包括使用<%@ include file="" %>.动态包括使用<jsp:include page=&qu ...
- Vue深度学习(6)- 组件
使用组件 在Vue中,可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ template:'..........' //选项 }) ...
- Winform开发框架中工作流模块的业务表单开发
在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...
- 如何导入外部的源码到eclipse中
用struts,spring等框架开发也有两年的时间了,一直很少去阅读其源码,每次在eclipse编码的过程中想要看某一个类的源码,ctrl点击总是出现source not found的提示,也没有去 ...