vue页面跳转后返回原页面初始位置方法

2018-02-17 19:16:24来源:作者:人点击

分享

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的

一、main.js里面配置vuex

//引用vuex import Vuex from 'vuex' Vue.use(Vuex) 

二、main.js里面vuex状态管理

var store = new Vuex.Store({  state: {  recruitScrollY:0  },  getters: {  recruitScrollY:state => state.recruitScrollY  },  mutations: {  changeRecruitScrollY(state,recruitScrollY) {  state.recruitScrollY = recruitScrollY  }  },  actions: {   },  modules: {} }) 

这里列举一个listview页面和详情页面,listview页面就是原始页面,listview页面跳转到详情页面,然后返回时候回到跳转到详情页面之前的位置,在listview页面编写代码

beforeRouteLeave(to, from, next) {  let position = window.scrollY //记录离开页面的位置  if (position == null) position = 0  this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来  next()  },  watch: {  '$route' (to, from) {  if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面,或者原始页面  let recruitScrollY = this.$store.state.recruitScrollY  window.scroll(0, recruitScrollY)  }  }  } 

四、若要避免created生命周期的执行,可以使用缓存keepAlive,这里也分享一下

(1)App.vue template

<keep-alive v-if="$route.meta.keepAlive">  <router-view></router-view>  </keep-alive>  <router-view v-if="!$route.meta.keepAlive"></router-view> 

(2)router index.js

Vue.use(Router)  const routerApp = new Router({  routes: [{  {  path: '/NewRecruit',  name: 'NewRecruit',  component: NewRecruit,  meta: {  keepAlive: true  }  },  {  path: '/NewRecruitDesc/:id',  name: 'NewRecruitDesc',  component: NewRecruitDesc,  meta: {  keepAlive: true  }  },  {  path: '/SubmitSucess',  name: 'SubmitSucess',  component: SubmitSucess,  meta: {  keepAlive: false  }  }  ] })  export default routerApp 

以上这篇vue页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • vue实现登录后页面跳转到之前页面
  • vue-router跳转页面的方法

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台