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

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

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

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

如何实现html页面自动刷新

页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新),一定时间之后跳转到指定页面(登录注册之类)

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

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

小程序下拉刷新

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

Vue刷新当前路由

开发项目的时候突然接到了这个需求,实验过后,解决方法也蛮多种,下面就讲下常规的几种方案:1.改变router-view中的key值通过改变router-view中的key值,来达到刷新组件的目的

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

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

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

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

vue项目如何刷新当前页面?

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候

nodejs自动刷新如何实现的?

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

Vue 改变数据,页面不刷新的问题

最近在用 element-ui 开发一个网站,使用 table 组件时,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。看了一下代码,发现修改数据的代码是这样的

vue强制刷新子组件

把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种:一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。

点击更多...

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