本文主要是介绍vue项目如何使页面后退不刷新，且还原滚动条位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
新指令化管理滚动状态地址https://blog.csdn.net/theoneEmperor/article/details/82669022(欢迎star)，滚动条保存以及回退只需要一条指令，让你为所欲为。
最近学了下node，自己用vue和node弄了个项目。在首页跳到详情页，然后从详情页再跳回来的时候，发现总是要刷新页面，这样对用户操作很不友好，意味着用户不能从上次离开的时候开始浏览，体验极差。我就想能不能回退不刷新，并且记录滚动条的位置，进行复原。
用到keep-alive做缓存的情况
于是就利用了官网上的keep-alive，把要缓存的页面包裹起来。可能有写界面不需要缓存，那么可以把状态写在路由里面进行控制，例如：
// router.js
{ path: '/register', name: 'register', component: register, meta: { keepAlive: false } },// App.vue 动画的实现，就交给大家集思广益了
<transition :name="transitionName" mode="out-in"><keep-alive><router-view class="child-view" v-if="$route.meta.keepAlive"></router-view> </keep-alive>
</transition>
<transition :name="transitionName" mode="out-in"><router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view> </transition>false表示不需要缓存，true表示需要缓存。使用后，发现页面是缓存了，但是滚动条还是个问题。
解决方案：离开之前先把滚动条位置存起来，就是dom的scrollTop，scrollLeft属性，看你的需求来，如果保存有效期只保存到整个vue实例的创建和销毁，也就是app的打开和关闭，可以存进vuex里面，自己写套规则也行。如果向保存久点，丢进localStorage，浏览器数据库等等都行。回来的时候再把它取出来滚动到相应位置就行了。这时候就需要区分滚动条的类型了，分为window全局滚动条和局部滚动条。
created () {this.$nextTick(() => {window.scrollTo(x, y); // 全局滚动条// 局部滚动dom.scrollTop = x;dom.scrollLeft = y;})
}如果this.$nextTick失效，不能滚动到目标位置，可以试着用setTimeout包裹，不过极大几率会有从0跳动到目标位置一闪的瞬间，解决方案放到下面一起讲。
不用keep-alive
对于分页加载的列表一定要用keep-alive，或者用我最上面推荐的那个插件里面介绍的写法(ps: 超简便)，但是列表页的数据一定要保存起来，回退不能刷新数据，如果是详情页的就没必要保存了，具体看那篇文章吧，这样比keep-alive好点。因为如果你遇到还有tab切换的选项卡型多列表共用一个滚动条现象就比较麻烦了。
对于一般的不分页的，如果不用keep-alive，也会存在从0到目标位置的闪动，视觉效果极差，可以做一些平滑处理。可以路由切换时加个极短时间的动画，来完美错过这个跳动的时间。还可以加一些请求时的loading动画，效果最好的是加在初始化请求的axios拦截器里(ps：假设你用的是axios)，效果非常好。好的动画插件比如：animate.css等，vue的官网上都有推荐。就用到了官网给出的transition。多个页面，直接用多个transition包裹，名字保持一致就好了，具体代码：
<transition :name="transitionName" mode="out-in"><router-view class="child-view"></router-view>
</transition>如果是全局滚动条的话，可以往其函数里传入options来平滑过渡，具体如下：
window.scrollTo({top: x,left: y,behavior: 'smooth'
});到这里，就差不多解决了。无时不在，欢迎讨论。
仓库地址：传送门
演示地址：传送门 (由于我这里只存放在当前实例上，所以刷新浏览器无效，请滑动到一定距离，进详情页，后退，或者直接在详情页查看)
这篇关于vue项目如何使页面后退不刷新，且还原滚动条位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
