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 ...
随机推荐
- ofBiz-groovy-freemarker
ofBiz-groovy-freemarker根据浏览器的地址不同进入不同的页面 第一步:(2选一)创建groovy文件,或者java文件.在文件中定义变量 要放在 request.setAttrib ...
- POJ 2195Going Home(网络流之最小费用流)
题目地址:id=2195">POJ2195 本人职业生涯费用流第一发!!快邀请赛了.决定还是多学点东西.起码碰到简单的网络流要A掉.以后最大流费用流最小割就一块刷. 曾经费用流在我心目 ...
- 19_Android中图片处理原理篇,关于人脸识别站点,图片载入到内存,图片缩放,图片翻转倒置,网上撕衣服游戏案例编写
1载入图片到内存 (1).数码相机照片特别是大于3m以上的,内存吃不消,会报OutOfMemoryError,若是想仅仅显示原图片的1/8,能够通过BitmapFactory.Options来实现.详 ...
- 求前n个素数(C++)
输入一个输n,输出前n个素数. #include<iostream> #include <math.h> using namespace std; class Sushu { ...
- Shiro学习(一)总体介绍
1.1 简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...
- jersey实现文件下载
好久没有更新博客了,今天来再次总结一下,之前有整理过关于jersey实现文件上传功能的相关知识,但是前一阵子在实习过程中写接口又要实现文件下载的功能,由于这些东西基本都是使用jersey提供的注解和接 ...
- MPSOC之9——host、embeded间tftp、nfs、ftp环境搭建
tftp 可传输单个文件,不能传文件夹 需要通过命令传输文件,略显复杂 ==一般调试kernel时,用uboot通过tftp方式启动,不用每次都烧写存储介质== nfs 在host linux(ubu ...
- cookies和re
参考:http://cuiqingcai.com/968.html http://cuiqingcai.com/977.html
- 唐纳德 高德纳给年轻人的建议 Donald Knuth - My advice to young people
From: Donald Knuth - My advice to young people (93/97) 译者: 李秋豪 原文 Donald Knuth (b. 1938), American c ...
- iBATIS使用$和#的一些理解
我们在使用iBATIS时会经常用到#这个符号. 比如: sql 代码 select * from member where id =#id# 然后,我们会在程序中给id这个变量传递一个值,iBATIS ...