집 >웹 프론트엔드 >JS 튜토리얼 >vue.js vue-router는 사용자 경험을 향상시킵니다.

vue.js vue-router는 사용자 경험을 향상시킵니다.

php中世界最好的语言원래의: 2018-04-14 11:22:311542검색

이번에는 사용자 경험을 향상시키기 위해 vue.js vue-router를 가져왔습니다. vue.js vue-router가 사용자 경험을 향상시키기 위해 사용할 수 있는 노트는 무엇입니까?

머리말

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

이번에는 공식 문서 [페이스 커버]

에서 정말 구체적인 지침을 찾지 못했습니다. 그러니 이 글은 제 DIY 아이디어일 뿐이니 양해 부탁드립니다 =_=

내가 이해하는 바에 따르면, vue-router는 등록된 경로를 경로에 따라 일치시키고, 일치하면 해당 구성 요소를 로드하고, 일치하지 않으면 해당 라우터 보기를 재설정(또는 삭제)합니다.

따라서 처리하지 않으면 마지막 페이지는 공백이 됩니다.

그럼 경로 매칭에 대해 소란을 피울 수 있을까요?

경로 모니터링

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

잘못된 경로 감지

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

인터페이스 팁

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

데모

App.vue

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

404가 얼마나 친숙한지는 당신에게 달려 있습니다

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!