如果页面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页面的滚动位置的解决方法的更多相关文章

  1. Vue2.0一个login跳转实例

    需要解决的问题:store存储登录状态Vue-Router导航钩子拦截路由Vue-Resource获取后台的数据需要判断登录返回的user源码参考原文地址 主要技术栈:Vuex + Vue-Resou ...

  2. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  3. vue2.0路由(跳转和传参)经典介绍

    声明式 <router-link :to="...">编程式router.push(...) router.push('home')                 / ...

  4. 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  5. Android Studio 使用Intent实现页面的跳转(带参数)

    不管是在APP,还是在网站中,页面之间的跳转都是很常见的,本文主要讲一下在APP中,如何通过Intent实现页面的跳转. 不带参数: 写在MainActivity页面的代码: Intent inten ...

  6. WebForm 回传后如何保持页面的滚动位置

    转载自 http://www.cnblogs.com/renjuwht/archive/2009/06/17/1505000.html 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部.对 ...

  7. 移动端页面以rem为单位设置字体大小不生效解决方法

    这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧 ...

  8. VC++6.0文件关联问题的解决方法

    最近我的电脑*.c文件关联失败,无法实现双击*.c打开vc++6.0,感觉特别不爽. 在经过自己的琢磨研究后,终于找到了解决方法. 特此分享下,希望可以帮到遇到同样问题的你. 核心内容: 1.& ...

  9. zf-关于邵阳市打印模块个别单号打印之后不会跳转到收费模块的BUG的解决方法

    原因是 办结的时候 有个收费管理,里面会生成收费项目的单号,但是有1个单号是有问题的,没有关联到数据库里面的其他的表,所以打印之后不能跳转.如果跳转到收费模块 那么数据库里面的一个flag字段会变成9 ...

随机推荐

  1. 数据库——SQLite---->Java篇

    SQLite SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经 ...

  2. 初装Ubuntu一般配置

    1. 开启ssh远程 2.修改root密码 sudo passwd 输入两次密码. 3.授权普通用户root权限 修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示: ...

  3. 超详细的 Linux CentOS 编译安装python3

    前言: 安装完CentOS7后,执行#Python与#python -V,看到版本号是2.6,而且之前写的都是跑在python3.X上面的,3.X和2.X有很多不同,在这里我就不弊述两者之间的区别了新 ...

  4. 自学Zabbix3.6.2-触发器triggers severity严重程度

    触发器严重性定义了触发器的重要性. 1. zabbix支持以下触发级别: SEVERITY DEFINITION 颜色 Not classified 未知. 灰色 Information 一般信息. ...

  5. redis主从配置+哨兵模式

    1.搭建redis主从,一个master两个slave,加一个哨兵监听(sentinel),可以新建三个虚拟机,模拟环境,我的电脑没那么多虚拟机,就在一台虚拟机上弄的. 2.安装redis,如果是三台 ...

  6. Ignite与Spark集成时,ClassNotFoundException问题解决

    参考文章:https://apacheignite-fs.readme.io/docs/installation-deployment Spark application deployment mod ...

  7. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...

  8. 数据分析与展示——Pandas数据特征分析

    Pandas数据特征分析 数据的排序 将一组数据通过摘要(有损地提取数据特征的过程)的方式,可以获得基本统计(含排序).分布/累计统计.数据特征(相关性.周期性等).数据挖掘(形成知识). .sort ...

  9. socket编程部分API

    以TCP协议为例,UNIX的相关API int socket(int domain , int type , int protocol); 根据指定的地址族,数据类型,协议来分配一个socket的描述 ...

  10. C++11新语法糖之尾置返回类型

    C++11的尾置返回类型初衷是为了方便复杂函数的声明和定义,但是当复杂度稍微提升一些的时候很明显能注意到这种设计的作用微乎其微. 首先考虑如下代码: C++ //返回指向数组的指针 auto func ...