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常用对象的方法和属性小结
Jan 24 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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中Session的概念
2006/10/09 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
js判断变量是否空值的代码
2008/10/26 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python实现购物程序思路及代码
2017/07/24 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
生产文员岗位职责
2014/04/05 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
消防宣传语大全
2015/07/13 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书