vue-router scrollBehavior的使用及使用无效的解决方案

2,588 阅读2分钟

前言:使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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的方法实现组件名称存储;