Vue 애플리케이션의 404 페이지를 전역적으로 구성하는 방법

이번에는 Vue 애플리케이션용 404 페이지를 전역적으로 구성하는 방법과 Vue 애플리케이션용 404 페이지 전역 구성에 대한 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

프런트엔드와 백엔드가 분리된 후 라우팅 점프 제어 책임은 프런트엔드로 넘어갑니다. 백엔드는

html 문서를 프런트엔드로 반환하고 다양한 기능을 제공하는 역할만 담당합니다. 인터페이스. 아래 예제로 사용하는 두 프로젝트는 모두 Vue를 기본 프레임워크로 사용합니다. 하나는 SPA 애플리케이션이고 다른 하나는 다중 페이지 애플리케이션으로, 둘 다 프런트 엔드에서 라우팅, 제어 및 렌더링됩니다.

전체 아이디어

단일 페이지 또는 여러 페이지에 관계없이 내 구현 아이디어는 경로: '/404'를 프런트 엔드 라우팅 테이블에 추가하고 해당 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'
 }
 ],
})

Routing 테이블이 동적으로 생성됩니다

라우팅 테이블이 동적으로 생성될 때, 즉 라우팅 테이블은 두 부분으로 나뉘는데, 한 부분은 기본 라우팅 테이블이고 다른 부분은 필요한 라우팅 테이블입니다. 사용자의 권한 정보를 기반으로 동적으로 생성됩니다.

이 프로젝트에서 동적으로 생성된 경로는 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 페이지 스타일 세트가 있을 수 있다는 것입니다. 물론 그렇지 않을 수도 있습니다. 현재로서는 라우팅 규칙을 동적으로 추가하는 방법을 더 이상 사용할 수 없습니다.

제가 채택한 해결책은 각 전역

Navigationguard에서 경로 일치 상황을 판단하는 것입니다. 이때 Vue Navigation Guard에서 일치하는 배열을 사용해야 합니다. 일치하는 항목이 없으면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!