404錯誤分為兩種：
1> 頁面中不存在該路由；
2> 頁面中傳遞的參數在服務器端不存在，比如，個人中心是需要從后端獲取數據的，但是你查詢的用戶是不存在的，此時也是404錯誤。
配置
在路由規則中，`*`代表的是任意字符。所以只要在路由的最后加一個`*`路由，那么以后沒有匹配到的`url`都會被導入到這個視圖中。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>VueRouter-404錯誤配置</title> </head> <body> <div id="app"> <ul> <li> <router-link to="/">首頁</router-link> </li> <li> <router-link to="/our/Xsan">我們</router-link> </li> </ul> <router-view></router-view> </div> <script> var index = Vue.extend({ template: "<h1>首頁</h1>" }) var our = Vue.extend({ template: "<h1>歡迎，{{$route.params.user}}</h1>" }) var errPage = Vue.extend({ template: "<h1>404錯誤</h1>" }) let router = new VueRouter({ routes: [{ path: "/", component: index }, { path: "/our/:user", component: our }, { path: "*", component: errPage }] }) new Vue({ el: "#app", router: router }) </script> </body> </html>