前言:使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router
能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
1.创建一个 Router 实例,可以用scrollBehavior
方法:
// 路由配置项
const router = new Router({
routes,
mode: 'history', // 去掉地址栏中的 # 号
// 记录滚动条高度
scrollBehavior(to, from, savedPosition) {
// console.log(savedPosition);//记录滚动条高度
return new Promise((resolve, reject) => {
if (savedPosition) {
resolve(savedPosition);
} else {
resolve({ x: 0, y: 0 });
}
});
},
});
2.注意事项
(1) 使用该方法时,应该把项目的body的高度设定为100%,y轴方向滚动条显示;(我把html的高也设定100%了,于是导致功能无效)所以html的高度不用设定;
body {
width: 100%;
height: 100%;
background-color: #f0f1f4;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
(2)需要记录高度的页面,还必须是有缓存的,不能返回页面后所有数据重新加载,这样也会导致滚动条重新归零;在这里使用keep-alive实现组件缓存;
在app.vue里面使用keep-alive,同时绑定:include,表示只针对某些组件实行组件缓存;
<template>
<div id="app">
<keep-alive :include="keepAliveComponents">
<router-view></router-view>
</keep-alive>
</div>
</template>
同时在computed属性中调用vueX的keepAliveComponents数组
computed: {
//***
//此处获取vuex的keepAliveComponents数组
keepAliveComponents() {
return this.$store.state.keepAliveComponents;
},
},
在vuex的store.js中进行存要缓存的组件和方法操作
state: {
keepAliveComponents: [],
}
mutations: {
// push到keepAliveComponents数组,并去重
keepAlive(state, component) {
// 注:防止重复添加(当然也可以使用Set)
!state.keepAliveComponents.includes(component) &&
state.keepAliveComponents.push(component);
},
// 跳转的不是想要的,去除当前路由缓存
noKeepAlive(state, component) {
const index = state.keepAliveComponents.indexOf(component);
index !== -1 && state.keepAliveComponents.splice(index, 1);
},
},
在router.js的路由守卫中进行组件判断并缓存;在这里用到了store.js,需要import store from '../store';引入;
// 路由守卫,在微信端添加标题
router.beforeEach((to, from, next) => {
// 作用是每次进入该组件,就将它缓存判断
if (from.name == 'patientIndex') {
store.commit('keepAlive', from.name); //调用vuex的keepAlive方法,并把路由的name传过去了
}
next();
});
总结:1. scrollBehavior
实现页面切换后记录滚动条的位置;
2.keep-alive实现组件的缓存,include实现组件选择性缓存;
3.vuex存储需要缓存的组件名称;
4.路由守卫判断需要缓存的组件,调用vuex的方法实现组件名称存储;