路由的過渡動畫：讓路由有過渡動畫，需要在<router-view>標簽的外部添加<transition>標簽，標簽還需要一個name屬性。

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

css過渡類名：
組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：

fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀后立刻刪除。
fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立刻刪除。
fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成后被刪除。
從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。

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

過渡模式mode：
in-out:新元素先進入過渡，完成之后當前元素過渡離開。
out-in:當前元素先進行過渡離開，離開完成后新元素過渡進入。

mode的兩個值
histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://cainiao.com/list/。
hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。

404頁面的設置：
用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，為此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機制.

設置我們的路由配置文件（/src/router/index.js）：

{
　　path:'*',
　　component:Error
}
這里的path:’*’就是找不到頁面時的配置，component是我們新建的一個Error.vue的文件。

2.新建404頁面：

在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

<template><div><h2>{{ msg }}</h2></div> </template> <script> export default {data () {return {msg: 'Error:404'}} } </script> ?我們在用<router-link>亂寫一個標簽的路徑。
?<router-link?to="sss">我是亂寫的路徑</router-link>?| 這樣就已經實現404頁面的效果。

路由中的鉤子：（路由配置文件中的鉤子函數） {path:'/params/:newsId(\\d+)/:newsTitle',component:Params,beforeEnter:(to,from,next)=>{console.log('我進入了params模板');console.log(to);console.log(from);next();//一定要寫！！ },

三個參數：

1、to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。
2、from:路徑跳轉前的路徑信息，也是一個對象的形式。
3、next:路由的控制參數，常用的有next(true)和next(false)。

（模板中的鉤子函數）

beforeRouteEnter：在路由進入前的鉤子函數。
beforeRouteLeave：在路由離開前的鉤子函數。

<script> export default {name: 'params',data () {return {msg: 'vue-router'}},beforeRouteEnter:(to,from,next)=>{console.log("準備進入路由模板");next();},beforeRouteLeave: (to, from, next) => {console.log("準備離開路由模板");next();} } </script>

路由編程式導航:（在業務邏輯代碼中需要跳轉頁面）

this.$router.go(-1) 和 this.$router.go(1)? ?前進和后退

this.$router.push('/目標地址')
這個編程式導航的作用就是跳轉。

?

轉載于:https://www.cnblogs.com/lhl66/p/7496701.html

總結

以上是生活随笔為你收集整理的Vue 路由知识三(过渡动画及路由钩子函数)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。