vue回到上一个位置

路由

export default new Router({
  // mode: ‘history‘,
  routes: [
    {
      path: ‘/‘,
      name: ‘Home‘,
      component: Home,
      meta: {
        keepAlive: true
      }
    }
  ],
  // 页面切换始终在最顶部
  scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition)
    if (savedPosition) {
      return savedPosition
    } else {
      return {
        x: 0,
        y: 0
      }
    }
  }
})

App.vue

  <div id="app">
    <!--<router-view/>-->
    <!--页面返回不刷新-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

调用的页面

  // 在页面离开时记录滚动位置
  beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
  // 进入该页面时,用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

+1页

<div @click="back">  <div class="iconfont header-abs-back"></div></div>
back () {  this.$router.go(-1)}

杂七杂八

  // 在页面离开时记录滚动位置
  beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
  // 进入该页面时,用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    console.log(document.body.scrollTop)
    if (window.performance) {
      console.info(‘window.performance works fine on this browser‘)
    }
    if (performance.navigation.type === 1) {
      console.info(‘This page is reloaded‘)
      next()
    } else {
      next(vm => {
        document.body.scrollTop = vm.scrollTop
      })
    }
  },

原文地址:https://www.cnblogs.com/ronle/p/10982391.html

时间: 2024-10-13 15:07:17

vue回到上一个位置的相关文章

android webview点击返回键回到上一个html

android webview点击返回键返回上一个html 1 @Override 2 public boolean onKeyDown(int keyCode, KeyEvent event) { 3 if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) { 4 mWebView.goBack();// 返回前一个页面 5 return true; 6 } 7 return super.onKeyDown(keyCod

侧滑手势控制器连动的效果,回到上一个控制器

Navigation包装的控制器,返回的时候上一个navigationBar也一起滑动的实现demo 在这里可以自定义NavBar + Swipeback 将系统的navBar隐藏,之后自定义一个view作为系统的navBar 自定义一个Vc作为base类. 在这个里面加载NavBar demo地址

[ jquery 位置选择器 :first-child :last-child ] 强化说明:选取属于其父元素和所有兄弟元素中子元素集合中处于第一个(最后一个)位置上符合条件的元素

强化说明:选取属于其父元素和所有兄弟元素中子元素集合中处于第一个(最后一个)位置上符合条件的元素 注意和:first :last 的区别 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http

ng6.1 新特性:滚回到之前的位置

在之前的版本中滚动条位置是一个大问题,主要表现在 1. 使用快捷键或者手势前进/后退的时候,滚动条的位置经常是错乱的,所以只能每个页面都要重置一个滚动条的位置: 2. #anchor1 锚点位置无法定位 2017年10月开始解决这个问题,历时7个月终于在 6.1 beta1 中解决了. 解决方案就是增加了一个全新的特性 Scroll Position Restoration,滚回到之前的位置. 有人详细介绍了这个特性,点我查看 今天我尝试了一下 ViewportScroller 的 scroll

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

返回数据给上一个活动

我们都知道,android开发中一个活动跳转时是可以带数据传递给下一个活动的,那么能不能够返回数据给上一个活动呢?答案是肯定的.不过不同的是,返回上一个活动只需要按一下Back键就可以了,并没有一个用于启动活动Intent来传递数据.通过查阅文档你会发现,Activity中还有一个startActivityForResult()方法也是用于启动活动的,但这个方法期望在活动销毁的时候能返回一个结果给上一个活动.毫无疑问,这就是我们所需要的. startActivityForResult()方法接收

Android开发:向下一个activity传递数据,返回数据给上一个activity

1.向下一个activity传递数据 activity1 1 Button button=(Button) findViewById(R.id.button1); 2 button.setOnClickListener(new OnClickListener() { 3 4 @Override 5 public void onClick(View v) { 6 Intent intent=new Intent("1111111111111111111"); 7 intent.addCa

京沪高铁上火车位置的实时监视模拟网站的开发

因为本人从小就对地理很痴迷,经常看地图,而且对火车有一种很特殊的感觉.以前吧,从影视作品中也经常看到在一个指挥室里面,工作人员可以时刻的监视火车运行的状态和位置,所以呢,我也打算做一个仅仅针对京沪高铁线路的模拟监视系统~(之所以是模拟呢,就是火车不可能实时的给我们返回位置数据吧,我们实时展示的火车的位置其实是基于当前的时间和火车的离开上一个站点的时间以及到达下一站点的时间计算出来的) 当然啦,我主要运用的就是国外的一大神写得一个简单的jquery库transit.js(连接地址:http://o

基因在染色体上的位置称为座位

基因在染色体上的位置称为座位,每个基因都有自己特定的座位.在同源染色体上占据相同座位的不同形态的基因都称为等位基因.在自然群体中往往有一种占多数的(因此常被视为正常的)等位基因,称为野生型基因:同一座位上的其他等位基因一般都直接或间接地由野生型基因通过突变产生,相对于野生型基因,称它们为突变型基因.在二倍体的细胞或个体内有两个同源染色体,所以每一个座位上有两个等位基因.如果这两个等位基因是相同的,那么就这个基因座位来讲,这种细胞或个体称为纯合体:如果这两个等位基因是不同的,就称为杂合体.在杂合体