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

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

您可能感兴趣的文章:

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

相关推荐

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

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

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • vue路由跳转后刷新指定页面的方法

    做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • vue列表数据删除后主动刷新页面及刷新方法详解

    vue列表数据删除后主动刷新页面及刷新方法详解

    问题描述: 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载) 解决: provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. (声明reload方法,控制router-view的显示或隐藏,从而控制页

  • javascript关于open.window子页面执行完成后刷新父页面的问题分析

    本文实例分析了javascript关于open.window子页面执行完成后刷新父页面的方法.分享给大家供大家参考.具体分析如下: 主页面: <input id="btnAdd" type="button" onclick="openWin();" value="添加" /> 在js中有如下代码: function openWin() { window.open('addInfo.jsp', '_blank', '

  • jQuery移动web开发之页面跳转和加载外部页面的实现

    changePage() 页面跳转 jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现.但要使用此方式的时候,要以点击一个链接或者提交表单来实现.此方法有两个参数. to:是第一个参数,是必须的,不可缺少.类型:字符串或者对象. 字符串: 绝对或相对URL地址.如:("about/us.html") 对象: jquery选择器对象,如:($("#about

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • VUE DOM加载后执行自定义事件的方法

    最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data

随机推荐