Vue-Router 패턴 및 후크를 사용하는 방법(자세한 튜토리얼)

이 글은 주로 Vue-Router 모드와 Hooks의 사용법을 소개하고 참고용으로 올려드립니다.

이전 글에서는 음식과 의복의 문제를 해결해준다고 할 수 있는 vuer-router의 기본적인 사용법을 주로 다루었습니다. 이제 애프터눈 티를 즐겨보세요

Mode

vue-router의 모드 옵션은 다음과 같습니다. 주로 라우터가 인스턴스화될 때 사용됩니다.

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

선택할 수 있는 모드는 히스토리와 해시 두 가지가 있습니다. 대략적으로 비교하면

AdvantagesDisadvantageshash사용하기 쉽고 배경이 필요하지 않습니다. 지원 URL에 해시 형식으로 존재하며 배경으로 전송되지 않습니다. history주소가 명확하고 이해하기 쉽고 배경 처리 백그라운드 협력 필요히스토리 모드의 최종 경로는 URL의 경로명에 반영됩니다. 이 부분은 서버로 전송되므로 서버는 이에 따라 가능한 각 경로 값을 매핑해야 합니다. 또는 매핑에 퍼지 일치를 사용합니다.

		입니다.
		해시 모드는 백그라운드에 대한 URL입니다. 주소의 해시 값이 백그라운드로 전송되지 않으므로 서버는 루트 주소 매핑만 수행하면 됩니다.

또한 히스토리 모드에서 백엔드가 일대일 매핑이 아닌 퍼지 매칭을 수행한다면 404 상황에 주의해야 합니다. 이때 프런트엔드 라우터에서 404 페이지를 정의해야 합니다.

404 경로의 정의

라우터 자체의 매칭은 위에서 아래로 이루어지기 때문에, 앞에서 매칭되는 경로가 발견되면 점프하게 됩니다. 따라서 다음과 같이 마지막에 404 경로를 직접 추가할 수 있습니다

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

이전 일치 항목을 찾을 수 없는 경우 *는 모두를 나타냅니다. 이는 모두 404 페이지를 가리킨다는 의미입니다

라우팅 후크

라우팅 후크 경로가 변경될 때 주로 사용자를 위한 것입니다. 일부 특별한 처리를 수행하여 정의되며 이에 의존합니다. . 정말 한 입.

일반적으로 Vue는 세 가지 주요 유형의 후크를 제공합니다

1. 글로벌 후크

2. 특정 경로 전용 후크

글로벌 후크

후크는 전역적으로 사용하려면 다음을 사용하세요.

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

특정 경로에 대한 전용 후크

언급한 대로 특정 경로에 대해 단독으로 사용되며 이는 후속 구성 요소의 후크와 본질적으로 동일합니다. 그들은 모두 특정 경로를 나타냅니다. 차이점은 여기서 일반적인 정의가 구성 요소가 아닌 라우터에 있다는 것입니다. 다음과 같습니다

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

구성 요소 내 후크

공식 정의를 먼저 살펴보세요.

라우팅 구성 요소에서 다음 경로 탐색 후크를 직접 정의할 수 있습니다

beforeRouteEnter

beforeRouteUpdate(2.2의 새로운 기능)
beforeRouteLeave
Routing 컴포넌트! Routing 컴포넌트! 중요한 것은 여기서 언급한 "Routing 컴포넌트", 그리고 Routing 컴포넌트에 대해 모두가 주목해야 합니다! == 컴포넌트, 라우팅 컴포넌트! == 컴포넌트, 라우팅 컴포넌트! == 구성품! 저는 이 부분에 대해 이전에는 전혀 관심을 두지 않았는데, 그러다가 하위 컴포넌트의 Hook 기능을 어리석게 조정하다가 쓸모가 없다는 것을 알게 되었습니다. . .

3. 먼저 라우팅 컴포넌트가 무엇인지 살펴볼까요?

Routing 컴포넌트: 라우터의 컴포넌트에 직접 정의된 컴포넌트

즉, 라우터에 정의된 Entry Vue 파일 이외의 컴포넌트에는 Hook 기능이 없으므로 사용할 필요가 없습니다. 하지만 이를 사용하면 오류가 보고되지 않으며 응답이 없을 뿐입니다. (그림을 그리고 싶었는데 너무 게으르다... 그냥 이해하시면 이해가 쉽습니다)

루트에서 후크를 사용하는 방법을 다시 살펴보겠습니다. 데이터 및 메서드와 동일한 수준입니다.

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

세 가지 라우팅 후크는 모두 세 가지 매개 변수를 포함합니다. 여기

to: Route: 진입하려는 대상 라우팅 객체

from: 경로: 현재 탐색이 Router
를 떠나려고 합니다. 다음: 기능: 이 후크를 해결하려면 이 메서드를 호출해야 합니다. 실행 효과는 다음 메서드의 호출 매개변수에 따라 달라집니다.
next(): 파이프라인의 다음 후크로 진행합니다. 모든 Hook이 실행되면 탐색 상태가 확인됩니다.
next(false): 현재 탐색을 중단합니다. 브라우저의 URL이 변경되면(아마도 사용자가 수동으로 또는 브라우저의 뒤로 버튼을 사용하여) URL 주소는 from 경로에 해당하는 주소로 재설정됩니다.
next('/') 또는 next({ path: '/' }): 다른 주소로 이동합니다. 현재 탐색이 중단되고 새 탐색이 시작됩니다.
위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

6. 관련 기사:

노드 요소를 jQuery로 대체하는 방법

Ajax를 통해 Servlet3.0과 순수 자바스크립트 간의 상호 작용에 대한 자세한 예

vue로 구현된 나무 모양 접시의 예

위 내용은 Vue-Router 패턴 및 후크를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!