Vue 프로젝트에서 라우팅을 사용하여 공개 구성 요소를 캡슐화하는 방법은 무엇입니까?

Vue 프로젝트에서 라우팅을 사용하여 공용 구성 요소를 캡슐화하는 방법

Vue 프로젝트 개발 과정에서 동일한 구성 요소를 여러 페이지에서 사용해야 하는 상황에 자주 직면하게 됩니다. 유사한 코드를 반복적으로 작성하는 것을 피하기 위해 이러한 공통 구성 요소를 캡슐화하고 라우팅을 통해 다른 페이지에서 사용할 수 있습니다.

아래에서는 라우팅을 사용하여 Vue 프로젝트에서 공용 구성 요소를 캡슐화하는 방법을 설명하기 위해 간단한 예를 사용합니다. Home.vue와 About.vue라는 두 페이지로 구성된 프로젝트가 있다고 가정해 보겠습니다. 두 페이지 모두 사용자 정보를 표시하려면 UserInfo.vue라는 공용 구성 요소를 사용해야 합니다.

먼저 프로젝트에 구성 요소라는 폴더를 만듭니다. 공용 구성 요소의 코드를 저장하려면 이 폴더에 UserInfo.vue라는 파일을 만듭니다.

UserInfo.vue의 코드는 다음과 같습니다.

<template>
  <div>
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}
</script>

다음으로 프로젝트의 src 폴더 아래에 router라는 폴더를 생성합니다. 라우팅 정보를 구성하려면 이 폴더에 index.js라는 파일을 만듭니다.

index.js의 코드는 다음과 같습니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

다음으로 Home.vue 및 About.vue 파일에 각각 공용 구성 요소인 UserInfo.vue를 소개하고 사용합니다.

Home.vue의 코드는 다음과 같습니다.

<template>
  <div>
    <h1>Home Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'Home',
  components: {
    UserInfo,
  },
}
</script>

About.vue의 코드는 다음과 같습니다.

<template>
  <div>
    <h1>About Page</h1>
    <UserInfo />
  </div>
</template>

<script>
import UserInfo from '@/components/UserInfo.vue'

export default {
  name: 'About',
  components: {
    UserInfo,
  },
}
</script>

마지막으로 프로젝트의 App.vue 파일을 수정하고 vue-router router-view 태그를 중첩시킵니다. 경로에 따라 해당 뷰를 표시하는 데 사용되는 적절한 위치.

App.vue의 코드는 다음과 같습니다.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

이 시점에서 Vue 프로젝트의 공용 구성 요소를 성공적으로 캡슐화한 후 라우팅을 통해 다른 페이지에서 사용했습니다. 이런 방식으로 우리는 시간과 코드를 절약하고 프로젝트의 개발 효율성을 향상시킬 수 있습니다.

공용 구성 요소를 캡슐화하기 위해 라우팅을 사용할 때 vue-router가 올바르게 설치 및 구성되었는지, 공용 구성 요소를 사용해야 하는 페이지에 올바르게 소개 및 등록되었는지 확인해야 합니다.

위 내용은 Vue 프로젝트에서 라우팅을 사용하여 공용 구성 요소를 캡슐화하는 방법입니다. 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 Vue 프로젝트에서 라우팅을 사용하여 공개 구성 요소를 캡슐화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!