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五图轮播切换实用版
Aug 17 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
javascript定时器完整实例
Feb 10 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
JavaScript实现贪吃蛇游戏
Jun 16 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 翻页 实例代码
2009/08/07 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用剪切板的方法
2017/06/06 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python实现简单遗传算法
2020/09/18 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
人事档案接收函
2014/01/12 职场文书
小小的船教学反思
2014/02/21 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
项目投资意向书
2014/04/01 职场文书
机器人瓦力观后感
2015/06/12 职场文书
网吧员工管理制度
2015/08/05 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL