<transition name="fade" mode="out-in">
        <router-view/>
    </transition>

name是必須屬性隅要。mode為過度效果的分層
mode:out-in 先退出，在進入
in-out 先進入谊却，在退出

fade-enter:進入過渡的開始狀態(tài)古涧，元素被插入時生效，只應(yīng)用一幀后立刻刪除侨艾。
fade-enter-active:進入過渡的結(jié)束狀態(tài)执虹，元素被插入時就生效，在過渡過程完成后移除唠梨。
fade-leave:離開過渡的開始狀態(tài)袋励，元素被刪除時觸發(fā)，只應(yīng)用一幀后立刻刪除当叭。
fade-leave-active:離開過渡的結(jié)束狀態(tài)茬故，元素被刪除時生效，離開過渡完成后被刪除蚁鳖。
簡單的效果

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

2.mode設(shè)置

histroy:當(dāng)你使用 history 模式時磺芭，URL 就像正常的 url，例如 http://jsapng.com/lms/醉箕，也好看钾腺！
hash:默認(rèn)’hash’值徙垫，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網(wǎng)址瀏覽習(xí)慣垮庐。

export default new Router({
  mode:'history/hash',
  routes: [
  ]
})

3.404頁面設(shè)置

router.js

{
      path:'*',
      component:Error
    }

在設(shè)置一個Error組件引入就可以了

4.路由中的鉤子函數(shù)

我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數(shù)松邪。但是在路由文件中我們只能寫一個beforeEnter,就是在進入此路由配置時：

{
      path:'/params/:newsId/:newsTitle',
      component:Params,
      beforeEnter:(to,form,next)=>{
        console.log(to)    //to返回一個對象，指的是去哪里
        console.log(form)  //form返回的是從哪來
        next()  //開關(guān)哨查，必須要有
      }
    }

模板中設(shè)置鉤子函數(shù)

  export default {
    data () {
      return {
        msg: 'params'
      }
    },
    beforeRouteEnter:(to,form,next)=>{
        console.log('準(zhǔn)備進入路由')
        next()
    },
    beforeRouteLeave:(to,form,next)=>{
        console.log('準(zhǔn)備離開路由')
        next()
    }
  }

5.編程式導(dǎo)航

App.vue

<div>
      <button @click="goBack">后退</button>
      <button @click="goTo">前進</button>
      <button @click="goHome">goHome</button>
    </div>

<script>
export default {
  name: 'App',
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    goTo(){
      this.$router.go(1)
    },
    goHome(){
      this.$router.push('/')
    }
  }
}
</script>