vue-router判断页面返回，呈现不同的动画效果

前言：在做vueapp的时候，想要一个效果，就是在点击底部菜单栏的时候页面是淡入淡出，用户使用手机物理按键返回的时候可以左边滑出，看了网上好多资料是判断路由的层级，如果从a/b到a/b/c那么不是返回, 相反从a/b/c到a/b就是返回, 但是我觉得这种方式有点死了, 必须要路由路径的配合, 虽然工作中是会这样做, 但是也不能排除出现意外的情况, 所以我想了另外一种方法. 就是用popstate这个事件. 具体就看代码吧.

首先需要监听popstate事件, 这个事件我是写在router/index.js里面的, 这里使用了store,并且使用了模块化, 为了省事就没有使用dispatch, 用户在点击返回按钮的时候就把GET_IS_PAGE_BACK这个状态置为true

window.addEventListener("popstate", function (e) {
  store.commit('common/GET_IS_PAGE_BACK', true);
}, false);

然后让路由延迟5ms跳转, 原因是保证路由跳转前vuex里面的状态已经改变, 还有一个原因是因为popstate这个事件是在router.beforeEach之后才执行的, 所以这里延迟了一会, 也无伤大雅.

router.beforeEach((to, from, next) => {
  let timer = setTimeout(() => {
    next();
  }, 5);
})

因为项目中使用的是vant, 底部的菜单栏用的是vant的组件, 然后自己封装了下, 只是个demo, 实际工作中数据肯定是从后端获取的,这里主要是用户点击菜单的时候需要将GET_IS_PAGE_BACK这个状态改为false, 这样整个功能就差不多了, 剩下的我就不说了.

<template>
  <van-tabbar v-model="active" route>
    <van-tabbar-item icon="home-o" :to="route1" @click.native="routerClick">标签</van-tabbar-item>
    <van-tabbar-item icon="search" :to="route2" @click.native="routerClick">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o" :to="route3" @click.native="routerClick">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import {onMounted, ref, reactive, watch, hydrate, computed} from 'vue';
import store from "@/store";

export default {
  name: 'tabNav',
  props: {},

  setup: function (props) {
    let active = ref('');
    let routerClick = () => {
      store.commit('common/GET_IS_PAGE_BACK',false)
      console.log(1);
    }
    let route1 = {name: 'login'}
    let route2 = {name: 'home'}
    let route3 = {name: 'userCenter'}
    return {
      active,
      routerClick,
      route1,
      route2,
      route3,
    }
  },

}
</script>

<style scoped>

</style>

最后附上模板连接 https://gitee.com/x251025116/vue3-templete.git