VUE-컴포넌트와 라우팅 간의 대응

Vue.js 프로젝트에서 루트 구성 요소로 사용할 때 App.vue일반적으로 요소를 App.vue포함합니다 . 라우팅 및 기타 구성요소와 접촉이 설정됩니다. 구체적인 단계는 다음과 같습니다.router-viewApp.vue

라우팅 구성 : 먼저 Vue Router를 구성하여 애플리케이션의 라우팅을 정의해야 합니다. 일반적으로 이는 일반적으로 router.js. 이 파일에서 Vue 및 Vue Router를 가져오고, 새 Router 인스턴스를 생성하고, 경로를 정의해야 합니다. 다음은 간단한 예입니다.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes,
  mode: 'history', // 使用"history"模式以获得更干净的URL
});

export default router;

Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자로 단일 페이지 애플리케이션(SPA)에서 라우팅 기능을 구현하는 데 사용됩니다. 이를 통해 라우팅 규칙을 정의하고 다양한 URL 경로에 따라 다양한 구성 요소를 동적으로 로드할 수 있으므로 전체 페이지를 새로 고치지 않고도 페이지 간에 전환할 수 있습니다.
Vue 프로젝트에서는 Vue Router를 구성하여 다양한 URL 경로를 해당 구성 요소에 매핑합니다. 이러한 방식으로 사용자가 특정 URL에 액세스하면 Vue Router는 해당 구성 요소를 자동으로 로드하고 App.vue지정된 위치에 렌더링하여 페이지 전환을 수행합니다.

App.vue에서 라우팅 가져오기 : 이제 라우팅을 구성했으므로 이를 App.vue구성 요소로 가져와야 합니다. 파일 시작 부분에서 가져올 수 있습니다.

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

<script>
import router from './router'; // 导入路由配置

export default {
  name: 'App',
  router, // 将路由与App.vue组件关联起来
};
</script>

<style>
/* App.vue的样式 */
</style>

Router-View 요소 : App.vue템플릿 에서 <router-view>요소는 현재 경로와 일치하는 구성 요소 콘텐츠를 렌더링하기<router-view> 위한 자리 표시자입니다. 사용자가 특정 경로에 액세스하면 해당 경로와 관련된 구성 요소가 요소 로 렌더링됩니다 . App.vue구성 요소는 현재 경로를 기반으로 해당 구성 요소를 렌더링하기 위한 진입점 역할을 합니다. Vue.js에서 <router-view>요소는 현재 경로의 경로와 일치하고 경로에 해당하는 구성 요소 콘텐츠를 렌더링합니다. 즉, 사용자가 특정 경로에 액세스하면 <router-view>해당 경로와 관련된 구성 요소가 표시됩니다. 경로는 전체 페이지에 해당합니다. <router-view>요소의 내용은 현재 경로의 경로에 따라 동적으로 변경되며 다양한 구성 요소를 렌더링하기 위한 출구 역할을 합니다. 현재 경로와 일치하는 구성 요소 콘텐츠를 렌더링하기 위한 자리 표시자 역할을 합니다. 현재 경로와 일치하는 구성 요소 콘텐츠를 렌더링하기 위한 자리 표시자 역할을 합니다. 이를 통해 전체 페이지를 새로 고치지 않고도 Vue.js 단일 페이지 애플리케이션에서 페이지 간 전환이 가능하므로 페이지 간 원활한 전환 및 탐색이 가능합니다.

App.vue구성 요소 에는 일반적으로 <router-view>요소가 포함됩니다.

<router-view>요소는 Vue Router가 라우팅 구성 요소를 동적으로 로드하는 출구이며, 현재 라우팅 구성을 기반으로 해당 구성 요소 콘텐츠를 렌더링합니다. 따라서 App.vue구성요소 내부에 요소를 배치하는 것은 <router-view>매우 일반적인 관행입니다 .

이러한 구조를 사용하면 App.vue루트 구성 요소( )의 다양한 구성 요소를 동적으로 렌더링할 수 있으므로 단일 페이지 애플리케이션의 여러 페이지 간 원활한 전환 및 탐색이 가능해집니다. 사용자가 다른 URL 경로에 액세스하면 <router-view>현재 경로와 일치하는 구성 요소 콘텐츠가 자동으로 렌더링되어 사용자가 여러 페이지를 탐색하는 효과를 느낄 수 있지만 실제로는 동일한 페이지의 콘텐츠가 지속적으로 교체될 뿐입니다 .

App.vue따라서 이를 전체 애플리케이션의 셸, 페이지 콘텐츠 로드 및 전환을 담당하는 컨테이너로 생각할 수 있으며, <router-view>라우팅 규칙에 따라 다양한 페이지 구성 요소를 표시하는 이 컨테이너의 동적 콘텐츠 영역입니다. 이 구성 요소 구조와 디자인 패턴은 Vue.js 단일 페이지 애플리케이션을 구축하는 데 매우 일반적이고 중요한 부분입니다.

VUE-컴포넌트와 라우팅 간의 대응

Guess you like