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


Posted in Javascript onFebruary 11, 2018

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页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
Express进阶之log4js实用入门指南
Feb 10 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
深入理解Promise.all
2018/08/08 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python连接字符串过程详解
2020/01/06 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
医学生求职自荐书
2014/06/12 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年采购部工作总结
2014/11/20 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年国培研修感言
2015/08/01 职场文书
z-index不起作用
2021/03/31 HTML / CSS
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
Oracle中DBLink的详细介绍
2022/04/29 Oracle