VUE路由跳转记住滚动位置，返回时回到上次滚动位置
本解决方案原理是利用Keep-Alive、监听滚动事件 与 watch中监听$route 实现。
使用watch监听$route的方案适用于滚动区域在子组件中的情况。
因为，beforeRouteLeave 路由导航守卫，只能作用在路由组件内，不能被路由组件内的子组件所触发。
vue-router文档截图如下：【VUE路由跳转记住滚动位置，返回时回到上次滚动位置】本样例使用element-ui 下的 el-table表格组件，原生或其他UI组件思路同理。
文章图片
router.js
{
path: '/dispatchDetail',
name: 'dispatchDetail',
component: () => import('@/views/dispatchDetail/index.vue'),
meta: { title: '日调度情况查询', keepAlive: true} //需要缓存
},App.vue
// 缓存组件跳转的页面
// 不需要缓存组件的页面
dispatchDetail.vue
// 在el-table标签上 添加ref属性 用于获取滚动区域dom
...
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目