Vue에서 라우팅을 사용하여 페이지 요소를 동적으로 표시하고 숨기는 방법은 무엇입니까?

Vue는 사용자 인터페이스를 구축하는 우아한 방법을 제공하는 인기 있는 프런트 엔드 프레임워크입니다. Vue 라우팅은 Vue 프레임워크의 중요한 기능으로 단일 페이지 애플리케이션에서 URL을 변경하여 페이지 간을 이동하고 탐색할 수 있습니다. 이 기본 기능 외에도 Vue 라우팅을 사용하여 페이지 요소를 동적으로 표시하고 숨길 수도 있습니다. 이 기사에서는 Vue 라우팅을 사용하여 이 기능을 구현하는 방법을 소개합니다.

먼저 Vue 라우팅을 설치해야 합니다. npm 명령을 사용하여 설치할 수 있습니다:

npm install vue-router

설치가 완료된 후 Vue 프로젝트(일반적으로 main.js)의 항목 파일에서 Vue 라우팅 및 관련 구성 요소를 가져올 수 있습니다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

다음으로 해야 할 일은 라우팅 및 서신의 구성 요소를 정의합니다. Vue 프로젝트의 루트 디렉터리에 새 라우터 폴더를 만들고 폴더 아래에 index.js 파일을 만듭니다. index.js 파일에서 경로와 해당 구성 요소를 정의합니다. 예는 다음과 같습니다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/components/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('@/components/Contact.vue'),
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

위의 예 코드에서는 각각 Home 구성 요소에 해당하는 /home, /about 및 /contact라는 세 가지 경로를 정의했습니다. vue, About.vue 및 Contact.vue. 다음으로 Vue 인스턴스에 라우팅을 도입해야 합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

위 코드에서는 라우터 인스턴스를 Vue 인스턴스에 추가하고 렌더링 함수에서 App.vue 구성 요소를 렌더링합니다.

이제 라우팅 설정이 완료되었습니다. 다음으로 구성 요소의 라우팅을 사용하여 페이지 요소를 동적으로 표시하고 숨길 수 있습니다.

컴포넌트에서는 975b587bf85a482ea10b0a28848e78a4 태그를 사용하여 경로에 해당하는 컴포넌트를 표시할 수 있습니다. 현재 URL의 경로를 기반으로 표시할 구성 요소를 결정합니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1>My App</h1>

    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

    <router-view></router-view>
  </div>
</template>

위 코드에서는 b988a8fd72e5e0e42afffd18f951b277 태그를 사용하여 각 링크가 경로에 해당하는 탐색 링크를 만듭니다. 링크를 클릭하면 URL의 경로가 변경되고 975b587bf85a482ea10b0a28848e78a4 태그가 해당 구성요소를 렌더링합니다.

또한 구성 요소의 $route 개체를 사용하여 현재 URL의 경로를 기반으로 구성 요소의 표시 및 숨기기를 제어할 수도 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1 v-if="$route.path === '/home'">Home</h1>
    <h1 v-if="$route.path === '/about'">About</h1>
    <h1 v-if="$route.path === '/contact'">Contact</h1>
  </div>
</template>

위 코드에서는 v-if 지시문을 사용하여 현재 URL의 경로를 기반으로 해당 4a249f0d628e2318394fd9b75b4636b1 태그를 표시할지 여부를 결정합니다.

위의 샘플 코드를 통해 Vue 라우팅을 사용하여 페이지 요소를 동적으로 표시하고 숨기는 방법을 확인할 수 있습니다. URL의 경로를 제어함으로써 다른 페이지 사이를 이동하고 탐색할 수 있으며 현재 URL의 경로를 기반으로 구성 요소의 표시 및 숨기기를 제어할 수 있습니다. 이는 유연한 프런트엔드 인터페이스를 개발하는 데 있어 큰 편리함을 제공합니다.

위 내용은 Vue에서 라우팅을 사용하여 페이지 요소를 동적으로 표시하고 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!