怎樣對Vue應用全域配置404頁面

這次帶給大家怎樣對Vue應用全域設定404頁面，對Vue應用全域設定404頁面的注意事項有哪些，下面就是實戰案例，一起來看一下。

前後端分離後，控制路由跳轉的責任轉移到了前端，後端只負責給前端返回一個html文件以及提供各種介面。以下我們用作範例的兩個項目，均採用vue作為基礎框架，一個是SPA應用，另一個是多頁應用，均由前端進行路由控制及渲染的。

整體思路

無論單頁或多頁，我的實作思路是整體配置404頁的想法就是在前端路由表中新增一個path: '/404' 的路由，渲染對應的404頁。同時，設定一個規則，當在使用者可存取的路由表中的所有路由都無法匹配的時候，自動跳轉重新導向至該404頁面。下面來說一下針對單頁和多頁，我不同的實作方式。

SPA的404路由設定

#單頁應用程式設定404頁面，也區分兩種情況：

路由表固定的情況

如果SPA的路由表是固定的，那麼設定404頁面就變得非常簡單的。只需要在路由表中新增一個路徑為 404 的路由，同時 在路由表的最底部 配置一個路徑為 * 的路由，重定向至404路由。

（由於路由表是從上到下匹配的，請務必將任意匹配規則至於最底部，否則至於此路由規則下的路由將全部跳轉至404，無法正確匹配。）

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 {
 path: '*', // 此处需特别注意至于最底部
 redirect: '/404'
 }
 ],
})

路由表動態產生的情況

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

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

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 // ...other codes
 ],
})
// notFoundRouterMap.js
export default [
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 },
 {
 path: '*',
 redirect: '/404'
 }
]
// main.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 if (getCookie(tokenName)) {
 if (!getInfo()) {
 Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
 store.dispatch('GenerateRoutes', { roles }).then(() => { 
 // 根据用户权限生成可访问的路由表
 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
 resolve({ ...to, replace: true }) // 重新加载一次路由，让路由表更新成功后走下面else的判断
 })
 
 })
 } else {
 // ...other codes
 }
 } else {
 window.location.href = '/login.html'
 }
 }).then(res => {
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

多頁應用的404路由配置

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

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

// permission.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 // ...other codes
 }).then(res => {
 if (!to.matched.length) {
 window.location = '/error.html#/404'
 return
 } 
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼用mpvue建構小程式

#怎麼進行mpvue小程式專案建立

以上是怎樣對Vue應用全域配置404頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！