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

更新日期: 2018-09-13阅读量: 4140标签: 刷新

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

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

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

解决vue页面刷新,数据丢失

在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,出现这个问题的原因是因为当用vuex做全局状态管理的时候

vue强制刷新子组件

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

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

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

小程序下拉刷新

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

实现无感刷新token我是这样做的

最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁的要去登录。前端:后端,你能不能把token 过期时间设置的长一点。后端:可以,但是那样做不安全,你可以用更好的方法。

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

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

单页应用后退不刷新方案(vue & react)

spa的渲染原理(以vue为例):url的更改触发onHashChange/pushState/popState/replaceState,通过url中的pathName去匹配路由中定义的组件,加载进来并实例化渲染在项目的出口router-view中。

Js返回上一页触发刷新

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

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

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

点击更多...

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