没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
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 }
资源推荐
资源详情
资源评论
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
weixin_38522214
- 粉丝: 2
- 资源: 880
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- DatabaseWatermarkingBasedonTextFormat
- -移动通信-网络课程设计与研究
- 基于Python的PCA人脸识别算法的原理及实现代码+文档详解.zip
- 甘肃移动全业务工程建设项目管理流程优化研究
- 549springboot + vue 民宿管理平台.zip (可运行源码+数据库文件+文档)
- ZArchiver.Pro_0.9.5.apk
- vmware环境配置.mp4
- 548springboot + vue 大学生社团活动平台.zip(可运行源码+数据库文件+文档)
- 微信小程序 辩论倒计时小程序源码 作业设计demo 计算机专业参考
- 深入探究文件IO,嵌入式Linux
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页