路由元資訊

過渡動效

簡單例子:
使用transition包住檢視渲染標籤

<transition name="fade">
      <router-view/>
    </transition>

使用官方提供的css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter{
  opacity: 0;
}
.fade-leave-to{
  display: none;
}

程式碼:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <transition :name="tName">
      <router-view/>
    </transition>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        tName: ''
      }
    },
    watch:{
      '$route'(to,from){
        //判斷點選哪個元件 賦不同的值
          if(to.name==='Home'){
            this.tName='fade'
          }
          else if(to.name==='About'){
            this.tName='fade2'
          }
        }
    }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter{
  opacity: 0;
}
.fade-leave-to{
  display: none;
}
.fade2-enter-active, .fade2-leave-active {
  transition: opacity 2s;
}
.fade2-enter{
  opacity: 0;
}
.fade2-leave-to{
  display: none;
}
</style>