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: {}

})

三、这里列举一个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

(2)router index.js

Vue.use(Router)

const routerApp = new Router({

routes: [{

{

path: '/NewRecruit',

component: NewRecruit,

meta: {

keepAlive: true

}

{

path: '/NewRecruitDesc/:id',

component: NewRecruitDesc,

meta: {

keepAlive: true

}

{

path: '/SubmitSucess',

component: SubmitSucess,

meta: {

keepAlive: false

}

]

})

export default routerApp

以上这篇vue页面跳转后返回原页面初始位置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue跳转页面之后返回_vue页面跳转后返回原页面初始位置方法相关推荐

android studio 跳转后保留原页面数据_Intent详解以及Activity的跳转与数据传递
在上一次讲述Activity的时候,还有一个非常重要且常用的知识点没有讲,就是不同Activity之间的跳转和数据传递.我们在平常在使用app应用的时候,Activity的跳转和数据传递是经常会接触到 ...
vue跳转页面增加等待_vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ 提交 export default { data(){ return { count:"",//倒计时 } } }, mounted(){ ...
element tree不刷新视图_Vue项目布署后，刷新页面404的真正原因找到了
从一篇日记说起我是一个小前端,我有写日记的习惯 2020年10月17 天气晴今天天气不错,心情也跟着好起来了辛辛苦苦加班两个星期终于完成了产品需求,到了要上线的时候了,嘴里也不知不觉哼起了&q ...
android studio 跳转后保留原页面数据_这些技巧和习惯，让你的原生 Android 手机更好用（上篇）...
从此前的 EMUI 9 到尚未正式推出的 ColorOS 6,硬件上难以突破技术限制的国产 Android 手机厂商,近来都开始在软件体验,即定制安卓 ROM 上大做文章.国内长久以来糟糕的安卓生态体 ...
使用Vue时localhost:8080中localhost换成ip地址后无法显示页面的问题
页面显示: 解决办法是: 在package.json中然后重新启动服务器 npm run dev 就正常显示了.
vue怎么vw布局好用_vue 实现 rem 布局的或者 vw 布局的方法
vue 实现 rem 布局的或者 vw 布局的方法一.实现 rem 布局移动端 name="viewport" content="width=device-widt ...
java 异常返回json_Spring MVC全局异常后返回JSON异常数据
问题: 当前项目是作为手机APP后台支持,使用spring mvc + mybaits + shiro进行开发.后台服务与手机端交互是发送JSON数据.如果后台发生异常,会直接返回异常页面,显示异常内 ...
java url 返回值_java提交url后返回值怎么取
展开全部我给楼主一个小的例子,服务62616964757a686964616fe4b893e5b19e31333332643935端负责接收请求,并且返回"0|提交成功|70.00&quo ...
计算机桌面软件乱跳怎么办,电脑跳屏怎么解决_电脑开机后一直跳屏的处理方法－系统城...
大家在使用电脑的时候有没有遇到显示器跳屏的情况呢?近来有很多小伙伴给小编反映说,自己的电脑在开机后出现了一直跳屏的现象,不知道怎么解决很是苦恼,所以对此今天本文就来为大家分享关于电脑开机后一直跳屏的处 ...
解决webpack打包vue项目后，部署完成后，刷新页面页面404
1.url不动式 url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的 ...

vue跳转页面之后返回_vue页面跳转后返回原页面初始位置方法

vue跳转页面之后返回_vue页面跳转后返回原页面初始位置方法相关推荐

最新文章

热门文章