一.vue-router的重定向-redirect
有時候設置的路徑不一致，但是我們希望跳轉到同一個頁面，或者說是打開同一個組件。這時候我們就用到了路由的重新定向redirect參數。
redirect基本重定向
我們只要在路由配置文件中（/src/router/index.js）把原來的component換成redirect參數就可以了。我們來看一個簡單的配置。
export default new Router({
routes: [
{
path: '/',
component: Hello
},{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goback',
redirect:'/'
}
]
})
這裏我們設置了goback路由，但是它並沒有配置任何component（組件），而是直接redirect到path:’/’下了，這就是一個簡單的重新定向。
重定向時傳遞參數
vue也已經爲我們設置好重定向時傳遞參數，我們只需要在ridirect後邊的參數裏複製重定向路徑的path參數就可以了。我們來看一段代碼：
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params
},{
path:'/goParams/:newsId(\\d+)/:newsTitle',
redirect:'/params/:newsId(\\d+)/:newsTitle'
}
已經有了一個params路由配置，我們在設置一個goParams的路由重定向，並傳遞了參數。這時候我們的路由參數就可以傳遞給params.vue組件了。參數接收方法和正常的路由接收方法一樣。
二.alias別名的使用
1.首先我們在路由配置文件裏（/src/router/index.js），給上節課的Home路徑起一個別名，jsyuyan。
{
path: '/hi1',
component: Hi1,
alias:'/jsyuyan'
}
2.配置我們的<router-link>，起過別名之後，可以直接使用<router-link>標籤裏的to屬性，進行重新定向。
<router-link to="/jsyuyan">jsyuyan</router-link>
redirect和alias的區別
- redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。
- alias：URL路徑沒有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內容。
填個小坑：
別名請不要用在path爲’/’中，如下代碼的別名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}
三.路由的過渡動畫
<transition>標籤
想讓路由有過渡動畫，需要在<router-view>標籤的外部添加<transition>標籤，標籤還需要一個name屬性。
<transition name="fade">
<router-view ></router-view>
</transition>
我們在/src/App.vue文件裏添加了<transition>標籤，並給標籤起了一個名字叫fade。
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屬性在這兩個類下進行設置。
那我們就在App.vue頁面里加入四種CSS樣式效果，並利用CSS3的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模式，這並不是我們想要的。下面我們學一下mode模式。
過渡模式mode：
- in-out:新元素先進入過渡，完成之後當前元素過渡離開。
- out-in:當前元素先進行過渡離開，離開完成後新元素過渡進入。
四.mode設置和404頁面的處理
mode的兩個值
- histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！
- hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。
404頁面的設置：
用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，爲此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也爲我們提供了這樣的機制.
1.設置我們的路由配置文件（/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>
3.我們在用<router-link>瞎寫一個標籤的路徑。
<router-link to="/bbbbbb">我是瞎寫的</router-link> |
預覽一下我們現在的結果，就已經實現404頁面的效果。
五.路由中的鉤子
路由配置文件中的鉤子函數
我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數。但是在路由文件中我們只能寫一個beforeEnter,就是在進入此路由配置時。先來看一段具體的代碼：
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我進入了params模板');
console.log(to);
console.log(from);
next();
}
我們在params路由裏配置了bdforeEnter得鉤子函數，函數我們採用了ES6的箭頭函數，需要傳遞三個參數。我們並在箭頭函數中打印了to和from函數。具體打印內容可以在控制檯查看object。
三個參數：
- to:路由將要跳轉的路徑信息，信息是包含在對像裏邊的。
- from:路徑跳轉前的路徑信息，也是一個對象的形式。
- next:路由的控制參數，常用的有next(true)和next(false)。
寫在模板中的鉤子函數
在配置文件中的鉤子函數，只有一個鉤子-beforeEnter，如果我們寫在模板中就可以有兩個鉤子函數可以使用：
- beforeRouteEnter：在路由進入前的鉤子函數。
- beforeRouteLeave：在路由離開前的鉤子函數。
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("準備進入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("準備離開路由模板");
next();
}
}
</script>
這是我們寫在params.vue模板裏的路由鉤子函數。它可以監控到路由的進入和路由的離開，也可以輕易的讀出to和from的值。
六.編程式導航
this.$router.go(-1) 和 this.$router.go(1)
這兩個編程式導航的意思是後退和前進，功能跟我們瀏覽器上的後退和前進按鈕一樣，這在業務邏輯中經常用到。比如條件不滿足時，我們需要後退。
router.go(-1)代表着後退，我們可以讓我們的導航進行後退，並且我們的地址欄也是有所變化的。
1.我們先在app.vue文件里加入一個按鈕，按鈕並綁定一個goback( )方法。
<button @click="goback">後退</button>
2.在我們的script模塊中寫入goback()方法，並使用this.$router.go(-1),進行後退操作。
<script>
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
}
}
}
</script>
打開瀏覽器進行預覽，這時我們的後退按鈕就可以向以前的網頁一樣後退了。
router.go(1):代表着前進，用法和後退一樣。
this.$router.push(‘/xxx ‘)
這個編程式導航都作用就是跳轉，比如我們判斷用戶名和密碼正確時，需要跳轉到用戶中心頁面或者首頁，都用到這個編程的方法來操作路由。
我們設置一個按鈕，點擊按鈕後回到站點首頁。
1.先編寫一個按鈕，在按鈕上綁定goHome( )方法。
<button @click="goHome">回到首頁</button>
2.在<script>模塊里加入goHome方法，並用this.$router.push(‘/’)導航到首頁
export default {
name: 'app',
methods:{
goback(){
this.$router.go(-1);
},
goHome(){
this.$router.push('/');
}
}
}
注意：本文參考：技術胖jspang.com