vue 404頁面配置

路由表中新增乙個路徑為404的路由，同時在路由表的最底部配置乙個路徑為*的路由，重定向至404路由即可。

//
router.js
export default
newrouter(,
],})

路由表是動態生成的情況下，也就是說路由表分為兩部分，一部分為基礎路由表，另一部分是需要根據使用者的許可權資訊動態生成的路由表。

本專案中動態生成路由採用vue-router自帶的addroutes方法，該方法是會將新的路由規則在原路由表陣列的尾部注入的。由於任意匹配重定向至404頁面的規則必須至於路由表的最底部，所以此處我將重定向至404頁面的規則抽出，在動態路由注入後，再注入重定向規則，以確保該規則至於路由表最底部。

//
router.js
export default
newrouter(,
//...other codes
],})

//
notfoundroutermap.js
export 
default[ 
]

//
main.js
//...other codes
router.beforeeach((to, from, next) =>).then(() =>) //
}) 
})} 
else
} else
}).then(res => 
else
}).catch(err =>)

多頁應用區別於spa的不同點是每個頁面有自己的一套路由，並且每個頁面可能有自己的一套404頁面風格，當然也可能沒有。這時候，就不能再採用動態新增路由規則的方法了。

我採用的方案是在全域性導航守衛beforeeach中對路由匹配的情況進行判斷，這時候就需要用到vue導航守衛中的matched陣列了。如果沒有乙個匹配上的，那麼就重定向至404頁面。當然，這個404頁面也單獨設定為乙個頁面。

//
permission.js
//...other codes
router.beforeeach((to, from, next) =>).then(res => 
if(res) 
else
}).catch(err =>)

這個方案就允許每個頁面有自己的404頁面路由規則，並且為沒有配置404頁面的路由統一配置了預設的404頁面，感覺還是比較友好的。