Vue.js의 동적 라우팅 및 명명된 뷰에 대한 간략한 분석

이 글은 Vue.js의 동적 라우팅과 명명된 뷰에 대한 간략한 분석을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

동적 라우팅
동적 라우팅 실제로 이는 라우팅 매개변수라고도 합니다.

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

위 형식의 경로는 동적 경로입니다. 콜론 뒤에는 여러 매개변수가 올 수 있습니다. 각 매개변수는 this.$route.params로 설정됩니다.

/user/:id 및 /user/:name에 주의하세요. 매개변수가 변경되면 구성 요소가 재사용되므로 구성 요소 수명 주기 후크가 다시 호출되지 않습니다. 컴포넌트를 재사용할 때 $route 객체의 변경 사항을 모니터링하여 경로 변경 여부를 모니터링할 수 있습니다.

RouterUpdate 이전의 라우팅 후크도 실행됩니다.

vue-router는 경로 일치 엔진으로 path-to-regexp를 사용합니다. 경로가 복잡하면 고급 일치 패턴을 학습할 수 있습니다. 하지만 일반적으로 경로가 너무 복잡하면 단순화하는 방법을 고려해야 합니다.

Named views

때때로 여러 뷰를 동시에 표시하고 싶을 때가 있습니다. 레벨), 사이드바(사이드 탐색)를 사용한 레이아웃 생성과 같은 두 가지 보기가 있습니다: 메인(메인 콘텐츠) 이때 보기 이름을 지정하는 것이 유용합니다. 단일 콘센트를 갖는 대신 인터페이스에 개별적으로 명명된 여러 개의 뷰를 가질 수 있습니다. router-view가 이름을 설정하지 않으면 기본값은 기본값입니다.

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

뷰는 하나의 구성 요소를 사용하여 렌더링되므로 동일한 경로의 경우 여러 뷰에는 여러 구성 요소가 필요합니다. 구성 요소 구성을 올바르게 사용했는지 확인하세요(s 포함):

routes: [
    {
      path: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

                                                                                                                              

vue-router 라우팅 기본 사항에 대한 간략한 소개

위 내용은 Vue.js의 동적 라우팅 및 명명된 뷰에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!