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

分手后的思念是犯贱 2022-06-02 06:16 211阅读 0赞

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

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