Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄

前后端分離后，控制路由跳轉(zhuǎn)的責(zé)任轉(zhuǎn)移到了前端，后端只負(fù)責(zé)給前端返回一個(gè)html文檔以及提供各種接口。下面我們用作例子的兩個(gè)項(xiàng)目，均采用vue作為基礎(chǔ)框架，一個(gè)是SPA應(yīng)用，另一個(gè)是多頁(yè)應(yīng)用，均由前端進(jìn)行路由控制及渲染的。

創(chuàng)新互聯(lián)建站主營(yíng)城陽(yáng)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開(kāi)發(fā),城陽(yáng)h5微信小程序搭建,城陽(yáng)網(wǎng)站營(yíng)銷推廣歡迎城陽(yáng)等地區(qū)企業(yè)咨詢

總體思路

無(wú)論單頁(yè)還是多頁(yè)，我的實(shí)現(xiàn)思路是總體配置404頁(yè)面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由，渲染相應(yīng)的404頁(yè)面。同時(shí)，配置一個(gè)規(guī)則，當(dāng)在用戶可訪問(wèn)的路由表中的所有路由都無(wú)法匹配的時(shí)候，自動(dòng)跳轉(zhuǎn)重定向至該404頁(yè)面。下面來(lái)說(shuō)一下針對(duì)單頁(yè)和多頁(yè)，我不同的實(shí)現(xiàn)方式。

SPA的404路由配置

單頁(yè)應(yīng)用配置404頁(yè)面，也區(qū)分兩種情況：

路由表固定的情況

如果SPA的路由表是固定的，那么配置404頁(yè)面就變得非常的簡(jiǎn)單。只需要在路由表中添加一個(gè)路徑為 404 的路由，同時(shí) 在路由表的最底部配置一個(gè)路徑為 * 的路由，重定向至404路由即可。

（由于路由表是由上至下匹配的，一定要將任意匹配規(guī)則至于最底部，否則至于此路由規(guī)則下的路由將全部跳轉(zhuǎn)至404，無(wú)法正確匹配。）

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

路由表動(dòng)態(tài)生成的情況

路由表是動(dòng)態(tài)生成的情況下，也就是說(shuō)路由表分為兩部分，一部分為基礎(chǔ)路由表，另一部分是需要根據(jù)用戶的權(quán)限信息動(dòng)態(tài)生成的路由表。

本項(xiàng)目中動(dòng)態(tài)生成路由采用vue-router自帶的addRoutes方法，該方法是會(huì)將新的路由規(guī)則在原路由表數(shù)組的尾部注入的。由于任意匹配重定向至404頁(yè)面的規(guī)則必須至于路由表的最底部，所以此處我將重定向至404頁(yè)面的規(guī)則抽出，在動(dòng)態(tài)路由注入后，再注入重定向規(guī)則，以確保該規(guī)則至于路由表最底部。

// 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(() => { 
 // 根據(jù)用戶權(quán)限生成可訪問(wèn)的路由表
 router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問(wèn)路由表
 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由規(guī)則
 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)
 })

多頁(yè)應(yīng)用的404路由配置

多頁(yè)應(yīng)用區(qū)別于SPA的不同點(diǎn)是每個(gè)頁(yè)面有自己的一套路由，并且每個(gè)頁(yè)面可能有自己的一套404頁(yè)面風(fēng)格，當(dāng)然也可能沒(méi)有。這時(shí)候，就不能再采用動(dòng)態(tài)添加路由規(guī)則的方法了。

我采用的方案是在全局導(dǎo)航守衛(wèi)beforeEach中對(duì)路由匹配的情況進(jìn)行判斷，這時(shí)候就需要用到vue導(dǎo)航守衛(wèi)中的 matched 數(shù)組了。如果沒(méi)有一個(gè)匹配上的，那么就重定向至404頁(yè)面。當(dāng)然，這個(gè)404頁(yè)面也單獨(dú)設(shè)置為一個(gè)頁(yè)面。

// 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)
 })

這個(gè)方案就允許每個(gè)頁(yè)面有自己的404頁(yè)面路由規(guī)則，并且為沒(méi)有配置404頁(yè)面的路由統(tǒng)一配置了默認(rèn)的404頁(yè)面，感覺(jué)還是比較友好的。

總結(jié)

以上所述是小編給大家介紹的Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

文章名稱：Vue單頁(yè)及多頁(yè)應(yīng)用全局配置404頁(yè)面實(shí)踐記錄
轉(zhuǎn)載注明：http://muchs.cn/article10/jehedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、微信小程序、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容