第9節：mode的設置和404頁面的處理
阿新 • • 發佈：2018-01-15
history 處理 scrip http scroll route 正常 查看 return
在學習過渡效果的時候，我們學了mode的設置，但是在路由的屬性中還有一個mode。這節課我們就學習一下另一個mode模式和404頁面的設置。
mode的兩個值
- histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！
- hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。
具體的效果我在視頻中會有所掩飾，不理解的小夥伴可以到視頻中進行查看。
404頁面的設置：
用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，為此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機制.
1.設置我們的路由配置文件（/src/router/index.js）：
| 1 2 3 4 | { path:‘*‘, component:Error } |
這裏的path:’*’就是找不到頁面時的配置，component是我們新建的一個Error.vue的文件。
2.新建404頁面：
在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template>
<div>
<h2>{{ msg }}</h2> |
3.我們在用<router-link>瞎寫一個標簽的路徑。
| 1 | <router-link to="/bbbbbb">我是瞎寫的</router-link> | |
預覽一下我們現在的結果，就已經實現404頁面的效果。
第9節：mode的設置和404頁面的處理