如何优雅的实现 vue 移动端路由切换效果

这可能是你见过的最优雅的 vue 移动端路由切换效果的实现了，源码可在 github 查看。

GitHub - XiaoLin1995/vue-transition-router: A page transition plugin for vue-router​github.com/XiaoLin1995/vue-transition-routerhttps://link.zhihu.com/?target=https%3A//github.com/XiaoLin1995/vue-transition-router

---

Demo 地址

墙内可能访问很慢

vue-transition-router​xiaolin1995.github.io/vue-transition-router/demo/#/https://link.zhihu.com/?target=https%3A//xiaolin1995.github.io/vue-transition-router/demo/%23/

使用方式如下：

下载 vue-transition-router

npm install vue-transition-router

在 router.js 中引入 vue-transition-router

// router.js
import Vue from "vue";
import VueRouter from "vue-router";
import transitionRouter from "vue-transition-router";

const routes = [
  {
    path: "/",
    name: "Home",
    meta: {
      transition: "", // 设为空字符则无效果，子路由也可设置
    },
    component: () => import("../views/home.vue"),
  }
];

let router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

export default transitionRouter(router, {
  forwardName: "slide-left", // 不设置的默认slide-left，设为空字符则无效果
  backName: "slide-right" // 不设置的默认slide-right，设为空字符则无效果
});

给 router-view 增加 transition

<template>
    <div>
        <transition :name="$router.transition.name">
            <router-view class="router-view"> </router-view>
        </transition>
    </div>
</template>

子路由用 transition 可能返回时效果不正确，可用 transtion-group 解决（暂时未想到其他好的方案），如下：

<template>
    <div>
        <transition-group :name="$router.transition.name">
            <router-view class="router-view" key="1"> </router-view>
        </transition>
    </div>
</template>

添加 transition 样式

以下为默认效果的样式，可自行引入想要的效果的样式

.slide-right-enter-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
  will-change: transform;
  transition: all 0.3s ease-out;
}

.slide-left-enter-active {
  transform: translateX(100%);
}
.slide-left-enter-to {
  transform: translateX(0);
}
.slide-right-enter-active {
  transform: translateX(-100%);
}
.slide-right-enter-to {
  transform: translateX(0);
}
.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-50%);
}
.slide-right-leave-to {
  z-index: 100;
  transform: translateX(100%);
}
.slide-right-leave-from {
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}
.slide-left-enter-from {
  z-index: 100;
  transform: translateX(100%);
  box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}
.slide-left-leave-to {
  opacity: 0.4;
  transform: translateX(-50%);
}

调用切换路由方法时，可以如下

<template>
  <div>
    <div
      @click="$router.push({ path: '/yourPath', transtion: '你的 transition 类名' })"
    ></div>
    <div
      @click="$router.replace({ path: '/yourPath', transtion: '你的 transition 类名e' })"
    ></div>
    <div @click="$router.back('你的 transition 类名')"></div>
    <div @click="$router.forward('你的 transition 类名')"></div>
    <div @click="$router.go(1, '你的 transition 类名')"></div>

    <router-link
      :to="{ path: 'home', transition: '你的 transition 类名' }"
    ></router-link>
  </div>
</template>