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

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

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

Mode

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

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

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

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-页面丢了'
  }
}]

라우팅 후크

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

1. 글로벌 후크

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

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. 먼저 라우팅 컴포넌트가 무엇인지 살펴볼까요?

즉, 라우터에 정의된 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. 관련 기사:

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

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

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