vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
2017-12-09 16:09
716 查看
如果页面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(0, 0); // nextRoute: 设置需要路由守卫的路由集合 const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile']; let isLogin = global.isLogin; // 是否登录 // 未登录状态;当路由到nextRoute指定页时,跳转至login if (nextRoute.indexOf(to.name) >= 0) { 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路由切换后页面滚动位置不变BUG的解决方法
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- vue页面跳转后返回原页面初始位置方法
- 解决Vue页面固定滚动位置的处理办法
- VUE 2.0在IE中打开页面空白的原因及解决方法
- Struts2.0页面跳转css无效问题的解决方法
- vue2.0路由切换后页面滚动位置不变BUG
- 关于切换页面时自动滚动到有RecyclerView的位置的解决方法
- Struts2.0页面跳转css无效问题的解决方法
- JQuery.get提交页面不跳转的解决方法
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- Vue下路由History模式打包后页面空白的解决方法
- Visual Studio在页面按F7不能跳转至cs代码页的解决方法
- 使用RequestDispatcher跳转页面后,JS与CSS样式都不见了的解决方法
- 页面重定向,看原型图时总会跳转到下载软件页面解决方法
- bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
- 详解刷新页面vuex数据不消失和不跳转页面的解决
- php页面跳转session cookie丢失,不能登录等问题解决方法