vue.js의 vue-router를 통해 잘못된 라우팅 프롬프트를 구현하는 방법

우리 모두 알고 있듯이 vue-router는 Vue.js의 공식 라우팅 플러그인이며 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합합니다. 다음 기사에서는 주로 vue 사용 방법을 소개합니다. -vue.js의 라우터. 도움이 필요한 친구는 잘못된 라우팅에 대한 친숙한 프롬프트(404)에서 관련 정보를 참조할 수 있습니다.

머리말

단일 페이지 애플리케이션의 경우 경로 점프 처리를 위해 공식 vue-router가 제공된다는 것은 누구나 알고 있습니다. 최근 vue-router 기반 SPA를 작업 중인데 잘못된 라우팅을 처리하고 싶습니다. (404) 페이지를 통합 처리합니다.

이번엔 정말 공식 문서 [얼굴 가리개]에서 구체적인 지시 사항을 찾지 못했습니다

그래서 이 글은 단지 제 DIY 아이디어일 뿐이니 양해 부탁드립니다 =_=

제 이해로는 vue-router 경로가 등록된 경로와 일치하면 해당 구성 요소가 로드됩니다. 일치하지 않으면 해당 라우터 보기가 재설정(또는 삭제)됩니다.

그래서 아무 처리도 하지 않으면 마지막 페이지가 공백이 됩니다.

그럼 경로 매칭에 대해 소란을 피워볼까요?

경로 모니터링

구성 요소에서 this.$route에서 현재 경로를 가져온 다음 watch를 사용하여 경로 변경 사항을 모니터링할 수 있습니다. 모든 경로 변경 사항은 자연스럽게 루트 라우팅 구성 요소(예: App. 뷰) .

잘못된 경로 감지

$route.matched에는 현재 경로의 일치 결과가 포함되어 있습니다. 비어 있으면 현재 경로가 유효하지 않습니다.

인터페이스 프롬프트

는 조건부 렌더링을 사용할 수 있습니다. 경로가 유효하면 라우터 보기가 렌더링되고, 경로가 유효하지 않으면 프롬프트 메시지가 렌더링됩니다.

Demo

App.vue

<template>
 <p v-if="invalidRoute">404</p>
 <router-view v-else></router-view>
</template>
<script type="text/babel">
 export default {
 name: &#39;App&#39;,
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript에서 개체 값을 병합하는 방법에 대해

Angular에서 확인을 구현하는 방법

Angular에서 테이블 정렬을 구현하는 방법

localstorage 및 Vue 정보 사용 방법 sessionstorage

jackson이 json 문자열을 구문 분석하는 방법에 대해

js에서 로컬 파일을 읽는 방법

위 내용은 vue.js의 vue-router를 통해 잘못된 라우팅 프롬프트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!