全国咨询热线:18720358503

展览会微信小程序_vue页面跳转后返回原页面初始

类别:行业新闻 发布时间:2021-01-08 浏览人次:

vue页面跳转后返回原页面初始位置方法       下面小编就为大家分享一篇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: {} 
}) 

iew页面跳转到详情页面,iew页面编写代码

beforeRouteLeave(to, from, next) { 
 let position = window.scrollY //记录离开页面的位置 
 if (position == null) position = 0 
 this.$mit('changeRecruitScrollY', position) //离开路由时把位置存起来 
 next() 
 watch: { 
 '$route' (to, from) { 
 if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",iew页面,或者原始页面 
 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页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


推荐阅读

展览会微信小程序_vue页面跳转后返回原页面初始

vue网页页面自动跳转后回到原网页页面原始部位方式 下边网编就为大伙儿共享一篇vue网页页面自动跳转后回到原网页页面原始部位方式,具备非常好的参照使用价值,期待对大伙...

2021-01-08
网站设计公司如何解决网站加载时间缓慢

    客户讨厌等候時间载入长的网页页面,网页页面速率再用户感受中起主要要功效,但很人忽视了速率提升,危害网站载入時间的重要要素有下列好多个。1、网络服务器网络服务器特...

2021-01-08
广州凡科互联网科技股份有限公司招聘天猫推广

招聘人数:7职位信息工作内容 :1、制定直通车/钻展推广/超级推荐投放计划并执行,根据推广数据实时优化调整,完成店铺销售目标,调控ROI;2、负责付费推广数据持续跟踪和评估,...

2021-01-08
微信预约小程序_vue 设置proxyTable参数进行代理跨

vue 设定proxyTable主要参数开展代理商跨域 _ 本文关键详细介绍了vue 设定proxyTable主要参数开展代理商跨域的有关材料,及代理商跨域的定义基本原理,必须的朋友能够参照下什么叫代...

2021-01-08
B2B2C多用户商城系统如何选择?

您的部位: > 新闻报道新闻资讯 > B2B2C要用户商城系统系统软件怎样挑选?近些年,伴随着互联网电子器件商务接待的迅速发展趋势,电子商务方式慢慢替代了传统式市场销售方式的影...

2021-01-08
广州凡科互联网科技股份有限公司招聘网络客服

招聘人数:15职位信息岗位职责:1 负责通过网络(qq、微信)主动联系客户,向客户提供产品的相关介绍,洽谈合作2 擅长沟通,懂得把握客户的心理,热情有耐心的回答客户所提出的...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信