关闭

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

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

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

关闭

$this.router.push到当前页面,只是传入参数不同,页面不刷新的问题解决

在vue中使用$this.router.push()方法,如果只是传入的参数不同,会出现url地址变化了,但是页面没有重新请求数据,需要刷新一下页面才有新的数据

Vue 实现前进刷新,后退不刷新的效果

在一个列表页中,第一次进入的时候,请求获取数据。点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

react-router刷新页面Cannot GET 问题

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

Js返回上一页触发刷新

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

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

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

Vuex持久化----解决刷新页面,数据丢失

利用localStorage或者是sessionStorage在vuex操作store的时候同时对存储操作,利用插件 vuex-persistedstate (Persist Vuex state with localStorage ,默认存储到localStorage)

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

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

javascript如何实现局部刷新?

下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

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

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

js实现返回上一页(页面刷新与不刷新)

history.go(-1), 返回两个页面: history.go(-2);window.history.forward() 返回下一页;window.history.go(返回第几页,也可以使用访问过的URL) ;如果要强行刷新的话就是:window.history.back();

点击更多...

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