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

WBOY

풀어 주다： 2023-07-21 15:39:15

원래의

2964명이 탐색했습니다.

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 구성 요소를 렌더링합니다.

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

컴포넌트에서는 태그를 사용하여 경로에 해당하는 컴포넌트를 표시할 수 있습니다. 현재 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>

로그인 후 복사

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

또한 구성 요소의 $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의 경로를 기반으로 해당