VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 이동 경로 구성 요소 캡슐화

Breadcrumb은 일반적으로 사용되는 탐색 방법으로 사용자가 자신의 위치를 ​​파악할 수 있을 뿐만 아니라 이전 메뉴로 돌아가는 기능도 제공합니다. 이 기사에서는 Vue.js 플러그인을 사용하여 이동 경로 구성 요소를 캡슐화하는 방법을 소개합니다.

1. 준비

Vue.js 플러그인을 사용하여 탐색경로 구성요소를 캡슐화하기 전에 Vue.js 및 Vue CLI를 설치하고 프로젝트에 Vue Router를 도입해야 합니다.

2. 탐색경로 플러그인 만들기

1. 플러그인 파일 만들기

먼저 "breadcrumb.js"와 같이 프로젝트에서 탐색경로 구성요소를 캡슐화하기 위한 플러그인 파일을 만듭니다.

2. 플러그인 코드 편집

"breadcrumb.js"에서 Vue.extend() 메서드를 사용하여 이동 경로 구성 요소를 만들 수 있습니다.

import Vue from 'vue'
import Breadcrumb from './Breadcrumb.vue'

const BreadcrumbConstructor = Vue.extend(Breadcrumb)

const breadcrumb = new BreadcrumbConstructor({
  el: document.createElement('div')
})

document.body.appendChild(breadcrumb.$el)

export default breadcrumb

위 코드에서는 BreadcrumbConstructor Constructor라는 Vue 구성 요소를 정의하고 래핑합니다. Vue.extend() 메서드를 통해 재사용 가능한 구성 요소로 변환합니다.

3. Breadcrumb 구성 요소 정의

이제 이동 경로 구성 요소를 정의하는 "Breadcrumb.vue" 파일을 만들 수 있습니다. 다음은 기본 탐색경로 구성요소 예입니다.

<template>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item" v-for="(item, index) in items" :key="index">
        <router-link :to="item.to">{{ item.label }}</router-link>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: ['items']
}
</script>

<style>
/* 样式可根据需求进行调整 */
</style>

위 코드에서는 Vue Router의 라우터 링크 구성요소를 사용하여 각 탐색경로 항목에 탐색 링크를 추가합니다. 동시에 이동 경로 데이터를 동적으로 전달하기 위해 items라는 prop도 정의했습니다.

4. 플러그인 등록

마지막으로 아래와 같이 이동 경로 플러그인을 Vue 프로젝트에 등록해야 합니다.

import breadcrumb from './breadcrumb.js'

Vue.use(breadcrumb)

이제 Vue.use() 메서드를 사용하여 프로젝트에 이동 경로를 설치할 수 있습니다. 안에. 이동 경로를 사용해야 하는 구성 요소에서는 다음과 같이 플러그인을 호출할 수 있습니다.

<breadcrumb :items="breadcrumbItems"/>

위 코드에서는 이동 경로에 필요한 데이터를 이동 경로 구성 요소에 소품으로 전달합니다.

3. 탐색경로 플러그인 사용

이제 탐색경로 구성요소 플러그인을 성공적으로 캡슐화했으므로 프로젝트에서 사용할 수 있습니다.

1. 페이지 만들기

탐색경로 구성 요소의 효과를 테스트하기 위해 기본 페이지를 만들 수 있습니다. 예:

<template>
  <div>
    <h3>页面一</h3>
    <ul>
      <li><router-link to="/page1/subpage1">子页面一</router-link></li>
      <li><router-link to="/page1/subpage2">子页面二</router-link></li>
    </ul>
  </div>
</template>

위 코드에서는 두 개의 하위 페이지가 포함된 "page1"이라는 페이지를 만듭니다. 다음으로 탐색경로에 페이지의 계층적 관계를 표시하겠습니다.

2. 라우팅 구성

Vue Router에서는 라우팅을 구성하여 탐색경로를 자동 생성할 수 있습니다. 예를 들어 "router.js" 파일에서 다음과 같이 경로를 정의할 수 있습니다.

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './views/Page1.vue'
import Subpage1 from './views/Subpage1.vue'
import Subpage2 from './views/Subpage2.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/page1',
      component: Page1,
      children: [
        {
          path: 'subpage1',
          component: Subpage1,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面一', to: '/page1/subpage1' }
            ]
          }
        },
        {
          path: 'subpage2',
          component: Subpage2,
          meta: {
            breadcrumb: [
              { label: '页面一', to: '/page1' },
              { label: '子页面二', to: '/page1/subpage2' }
            ]
          }
        }
      ]
    }
  ]
})

위 코드에서는 "meta" 필드를 사용하여 이동 경로 항목을 정의하고 경로에 저장합니다. 하위 경로에서는 "메타" 필드를 중첩하여 탐색경로 항목을 더 추가할 수 있습니다.

3. 이동 경로 표시

이제 페이지에 이동 경로를 표시할 수 있습니다. 다음과 같은 방법으로 현재 페이지의 탐색경로 항목을 가져올 수 있습니다.

computed: {
  breadcrumbItems() {
    let crumbs = []

    let matched = this.$route.matched
    matched.forEach(route => {
      if (route.meta && route.meta.breadcrumb) {
        crumbs.push(...route.meta.breadcrumb)
      }
    })

    return crumbs
  }
}

위 코드에서는 $route.matched 속성을 순회하여 페이지와 일치하는 모든 경로 항목을 가져옵니다. 그런 다음 각 경로 항목의 메타 필드를 확인하고 포함된 탐색경로 항목을 부스러기 배열에 추가합니다. 마지막으로 이동 경로 구성 요소에 표시할 부스러기 배열을 반환합니다.

4. 효과 표시

위 구성을 완료한 후 페이지에 탐색경로를 표시할 수 있습니다. 다음은 "subpage1" 페이지의 탐색경로 효과입니다.

页面一 / 子页面一

사용자가 탐색경로 항목을 클릭하면 Vue Router의 라우팅 점프 기능을 사용하여 사용자가 빠르게 이전 메뉴로 돌아갈 수 있도록 할 수도 있습니다.

4. 요약

이 기사에서는 Vue.js 플러그인을 사용하여 이동 경로 구성 요소를 캡슐화하는 방법을 소개했습니다. 캡슐화를 통해 이동 경로 구성 요소를 독립적인 모듈로 처리할 수 있으므로 프로젝트 전체에서 관리 및 재사용이 더 쉬워집니다. 동시에 탐색경로 구성요소는 사용자에게 편리한 탐색 및 복귀 기능을 제공하여 사용자 경험을 향상시킵니다.

위 내용은 VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 이동 경로 구성 요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!