vue页面如何返回不刷新_ vue页面撤退不能返回到顶部的实现

时间: 2018-09-13阅读: 3153标签: 刷新

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

(3)在回退页面的时候,如果出现有个滚动条条转的过程,会有一下的界面跳动,可以在路由切换时加个极短时间的动画,来完美错过这个跳动的时间。就用到了官网给出的transition,直接用多个transition包裹,具体代码

<transition :name="transitionName" mode="out-in">
//...
</transition>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1078

关闭

小程序下拉刷新

在小程序中onLoad生命钩子只在页面创建时调用一次,在做navigateTo页面跳转后,返回上级页面,由于navigateTo跳转只是隐藏了当前页面,因此返回上一级页面时onLoad生命钩子不会再次执行,这样带来的好处是页面能快速展示出来

Js返回上一页触发刷新

要知道history.back返回上一页是不会触发刷新的,这是浏览器的机制,但我们可以做些兼容处理,代码如下:进入页面后,先把referrer保存到sessionStorage里

移动端下拉刷新头实现原理及代码实现

实现下拉刷新主要分为三步:监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY;监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于某个临界值时,显示下拉刷新头

nodejs自动刷新如何实现的?

nodejs自动刷新的实现方法:采用gulp、browser-sync及gulp-nodemon可以实现自动刷新,使用npm install命令进行安装,在项目根目录中新建js文件添加代理端口,使用命令gulp server启动代理端口即可。

Vue刷新当前页面的3种实现

缺点:同 this.$router.go(0) 一样,会白屏。通过 $nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

解决使用vuex刷新页面state数据消失

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。

js刷新当前页面的5种方式

当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的

react-router刷新页面Cannot GET 问题

我先是按照控制台的错误搜索,得出的结果都是对meta头部进行设置,允许资源请求,但是问题依然没有解决,偶然间改变了想法,会不会是路由的问题呢,一搜还真是,这是因为没有历史记录,添加HashRouter即可

页面刷新时,如何保持原有vuex中的state信息

页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。

js实现上拉加载,下拉刷新

使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大概就这意思。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!