zoukankan      html  css  js  c++  java
  • 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(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();
    });

    就这样简单

  • 相关阅读:
    .Net Core Swagger配置
    MySQL如何使用索引
    一个HTTP Basic Authentication引发的异常
    跑步花钱吗?
    跑步花钱吗?
    OpenShift中的持续交付
    在AWS中部署OpenShift平台
    壮美大山包-2017中国大山包国际超百公里ITRA积分赛赛记
    膝盖中了一箭之康复篇-两周年纪念
    HashiCorp Vault介绍
  • 原文地址:https://www.cnblogs.com/minigrasshopper/p/8011748.html
Copyright © 2011-2022 走看看