vue 프로젝트 에서 접근 경로 가 존재 하지 않 을 때 기본적으로 404 페이지 를 방문 합 니 다.

선언:
Vue 프로젝트 에서 방문 한 페이지 경로 가 존재 하지 않 거나 오류 가 발생 했 을 때 페이지 는 공백 으로 표 시 됩 니 다.그러나,일반적으로 우 리 는 url 에 접근 하 는 데 존재 하지 않 거나 잘못된 상황 에서 기본 404 페이지,즉 not found 페이지 를 추가 해 야 합 니 다.
일반적인 처리 방법 은:
마지막 으로 path:*를 추가 합 니 다.우선 순위 가 위 에서 아래로 길 을 찾 습 니 다.없 을 때 모두 404 페이지 를 가리 키 고 코드 는 다음 과 같 습 니 다.

const baseRoute = [
 { path: '/login', name: 'login', component: Login },
 {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},
 // 404page
 { path: '/404', name: 'page404', component: page404 },
 {
 path: '/',
 redirect: '/index',
 component: Layout,
 children: [
 {
 path: 'index',
 name: 'index',
 component: ModeIndex,
 meta: {
  title: '', //     
  icon: ''
 }
 },
 {
 path: 'project',
 name: 'project',
 component: Project,
 meta: {
  dynamic: true, //        
  title: ''
 }
 }
 ]
 }
 {
 path: '*', //             404  
 redirect: '/404',
 name: 'notFound',
 hidden: true
 }
]
const router = new Router({
 routes: baseRoute
})

질문:
이렇게 하면 좋 은 점 은 간단 하고 편리 하 다 는 것 입 니 다.그러나 제 코드 에 다음 과 같은 코드 가 추가 되 어 있 기 때문에 페이지 token 이 효력 을 잃 고 로그 인 할 때 현재 경 로 를 기억 하고 다음 에 다시 로그 인 할 때 지정 한 경로 로 바로 이동 합 니 다.

if (to.path.slice(1) !== '') {
  router.push({
  path: '/login',
  query: {
  redirect: to.path.slice(1)
  }
  })
 } else {
 router.push({
  path: '/login'
 })
 }

바로 찾 을 수 없 는 모든 것 이 404 를 가리 키 기 때문에 처음으로 인터넷 주 소 를 모 르 는 사람 이 잘못 진 후에 redirect 는 404 를 가리 키 게 되 었 습 니 다.그러면 사용자 가 첫 번 째 로그 인 에 성공 한 후에 페이지 가 404 에 들 어가 체험 이 좋 지 않 고 제품 과 테스트 도 페이지 에 bug 가 생 긴 줄 알 았 습 니 다.이 문 제 를 해결 하기 위해 관련 자 료 를 찾 았 습 니 다.다음은 최적화 된 방법 입 니 다.
최 적 화 된 설정 방식:
1、route --> index.js
끝부분 제거

const baseRoute = [
 { path: '/login', name: 'login', component: Login },
 {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},
　　// 404page
　{path: '/404', component: page404, name: 'page404'},　
 {
 path: '/',
 redirect: '/index',
 component: Layout,
 children: [
 {
 path: 'index',
 name: 'index',
 component: ModeIndex,
 meta: {
  title: '', //     
  icon: ''
 }
 },
 {
 path: 'project',
 name: 'project',
 component: Project,
 meta: {
  dynamic: true, //        
  title: ''
 }
 }
 ]
 },
 // {
 // path: '*', //             404  
 //redirect: '/404',
 //name: 'notFound',
 //hidden: true
 //}
]
const router = new Router({
 routes: baseRoute
})

2.router.beforeach 에서 to.matched 가 일치 하 는 경로 의 개 수 를 사용 하여 판단 조건 으로 하고 경로 가 일치 하지 않 으 면 404 페이지 로 이동 합 니 다.코드 는 다음 과 같 습 니 다.
pemmision.js
코드 는 다음 과 같 습 니 다:

import router from './router'
import { getCookie } from './utils/auth'

//   beforeEach               token
const whiteList = ['/login'] //        
// const userInfo = getUserInfo()

router.beforeEach((to, from, next) => {
 console.log(to.matched)
 //         
 if (getCookie('userId_dev')) {
 //     userId_dev                 /
 if (to.path === '/login') {
 next()
 } else {
 if (to.matched.length === 0) {
 next('/404') //                 ，            ，     404  
 }
 next() //          
 }
 //     
 } else {
 if (whiteList.indexOf(to.path) !== -1) {
 next()
 } else {
 //                
 // next('/login')
 if (to.path.slice(1) !== '') {
 if (to.matched.length === 0) {
  router.push({
  path: '/login'
  })
 } else {
  router.push({
  path: '/login',
  query: {
  redirect: to.path.slice(1)
  }
  })
 }
 } else {
 router.push({
  path: '/login'
 })
 }
 }
 }
})

이렇게 해서 처음부터 잘못 지고 404 로 넘 어 가 는 어색 함 이 해결 되 었 습 니 다!
추가 지식:Vue 에서 사용자 가 잘못된 주 소 를 입력 하고 오류 알림 페이지 로 이동
1.동적 경로 에서 일부 경 로 는 잘못된 경로 이 고 잘못된 길 을 잘못된 알림 페이지 로 이동 시 킬 수 있 습 니 다.
구성 요소 의$router 속성의 원형 에 방법 이 있 습 니 다(this.$router)

(1)go 방법
(2)replace:잘못된 경 로 를 새로운 경로 로 바 꾸 고 잘못된 페이지 의 구성 요 소 를 만 듭 니 다.
a―b(존재 하지 않 는 경로)―c(c 로 b 를 대체 했다);그래서 경로 중 에 a--c
(3)push:a―b(존재 하지 않 는 경로)―c(b 뒤에 c 추가);그래서 경 로 는 a―b―c 이다.

이상 의 vue 프로젝트 에서 방문 경로 가 존재 하지 않 을 때 404 페이지 를 기본 으로 방문 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.