vue路由切换之淡入淡出的简单实现

下面是“vue路由切换之淡入淡出的简单实现”的完整攻略：

一、背景介绍

在web应用程序中，经常需要通过路由来实现页面切换，给用户带来更好的交互体验。而在路由切换时，淡入淡出效果通常能使用户感觉更加温和，增强用户体验。

本文主要介绍如何在vue项目中实现路由切换时的淡入淡出效果。

二、基本思路及方法

要实现vue路由切换时的淡入淡出效果，基本思路是通过CSS3动画特性来实现。具体方法包含以下几个步骤：

1. 设置路由切换时的动画效果样式

在css中定义路由切换的动画样式。这里使用了transition和opacity两个属性实现淡入淡出效果。

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

2. 在路由组件中设置router-view元素的v-bind:transition属性

在路由组件中设置router-view元素的v-bind:transition属性，指定路由切换时使用的动画效果。

<router-view v-bind:transition="'fade'"></router-view>

3. 创建App.vue演示效果

在App.vue中创建演示效果的代码，启动路由，并将路由切换时的效果展示出来。

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}

三、示例代码

下面给出两个示例，分别是基于vue-cli 2.x和vue-cli 3.x的项目。

1. 示例项目1：基于vue-cli 2.x

# 全局安装vue-cli 2.x版本
$ npm install -g vue-cli@2.x

# 初始化项目
$ vue init webpack my-project

# 安装vue-router
$ npm install --save vue-router

# 在src目录下创建router.js文件
$ touch src/router.js

router.js代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

App.vue代码：

<template>
  <div id="app">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

2. 示例项目2：基于vue-cli 3.x

# 全局安装vue-cli 3.x版本
$ npm install -g @vue/cli

# 初始化项目
$ vue create my-project

# 安装vue-router
$ npm install --save vue-router

router.js代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

App.vue代码：

<template>
  <div id="app">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
    </ul>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>