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 相关文章推荐
javascript制作loading动画效果 loading效果
Jan 14 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
jQuery插件之validation插件
Mar 29 jQuery
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
浅谈React高阶组件
Mar 28 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
原生js实现弹幕效果
Nov 29 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue中实现高德定位功能
2019/12/03 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
行政管理专业推荐信
2013/11/02 职场文书
社区居务公开实施方案
2014/03/27 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2015学校年度工作总结
2015/05/11 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL