vue.js需求:1.浏览器前进(点击连接)后,进入下一个页面刷新数据,浏览器点击后退按钮不刷新数据。2.在1的前提下,需要保持之前滚动的位置
发布于 2 年前 作者 jiasongs 5755 次浏览 来自 问答

最近学vue.js和Node.js,有上述这样一个需求,用vue实现,想了很久没想到一个合理的解决方案。希望大家能给小白一个答案!

17 回复

搜一下 html5 history API 和 前端路由 看看

如果你的页面是单页应用,Vuet可以实现你的需求

import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)

const vuet = new Vuet({
  modules: {
    testModule: {
      data () {
        return {}
      }
    }
  }
})


new Vue({
  // ...
  vuet,
  template: `
    <div v-vuet-scroll.self="{ path: 'testModule',  name: '随便给一个名字' }"></div>
  `
})

如果你需要记录多个滚动条,调用多次v-vuet-scroll这个指令,设置不同的名字即可

我也很想知道

@1340641314 我项目里用的是vuex,设置state是可以达到滚动到相应位置的效果,但是如果是多页面有这个需求,那存放的state会很多。而且最主要是的“前进刷新,后退不刷新数据”这个问题,只要这个解决了,我用vue-router的scrollBehavior和keep-alive能实现这个效果。

@jiasongs 你可以看下我vue-cnode这个项目,这个已经是基于Vuet进行重构了,可以轻易实现你要的效果。

@jiasongs keep-alive如果缓存详情的话,会出现打开其他页面时,会显示上一次访问的页面,体验的效果其实并不怎么好。

1、返回刷新问题,大多是代码问题 2、vuex记录上一次滚动的高度,组件挂载后scroll到vuex记录的高度

@1340641314 哇 这个项目很强 谢谢!

@kidbai 想过用vuex记录,但是如果多个页面需要记录的话,未免太多了些

之前我也有个需求,网上搜说用vue-router的 HTML5 History 模式 ,设置scrollBehavior:true和keep-alive就可以实现,但不知道为什么我这里没效果, 后来就用了类似楼上的方法,在beforeRouteLeave 时候 用vuex记录此时的window.pageYOffset,然后beforeRouteEnter 时候用window.scrollTo(0,刚才记录的高度)就可以了

@jiasongs 多个页面要记录是业务复杂度造成的,vuex只是一个方案

@spezz07 我是History scrollBehavior:true和keep-alive 可以实现滚动的位置。但是我项目的首页是缓存的,详情是不缓存的。在首页点进去详情再返回是有效果的,但是在详情页面点入其他页面,在返回就没有效果了,主要是因为我的详情页面没有缓存,返回时scrollBehavior先执行了,然后详情页面请求了数据,所以就没有效果了。现在想解决一下返回时不请求数据的问题。

@kidbai 其实我做的并不复杂,用vuex完全可以解决,但是我想知道“前进刷新,后退不刷新”这个怎么实现

@kidbai 总体来说就是A,B,C三个页面,A->B 刷新 B->A不刷新 B->C刷新 C->B不刷新

@spezz07 总体来说就是A,B,C三个页面,A->B 刷新 B->A不刷新 B->C刷新 C->B不刷新

@jiasongs 其实要实现这个并不复杂,有两种思路, 第一种:是直接缓存组件,判断url是否是前进还是后退,后退直接从缓存组件里面还原即可,你可以参考一下vue-navigation 第二种:对页面进行状态管理,如果页面是后退则直接还原状态,如果页面前进,则重置状态,Vuet就属于第二种

关于第一种的思路,你可以看下这篇基于vue的移动web app页面缓存解决方案

@jiasongs 这篇文章你可以看下 用Vue 的include/exclude 功能,http://www.jianshu.com/p/0b0222954483 来进行缓存。不过我看楼上的那个Vuet解决方案 好像不错,我有机会也试下

回到顶部