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

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

17 回复

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

1

如果你的页面是单页应用，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解决方案 好像不错，我有机会也试下

回到顶部