Vue에서 탐색을 구현하는 방법

Vue는 단일 페이지 애플리케이션 개발에 적합한 JavaScript 프레임워크이므로 중요한 부분은 탐색입니다. Vue에서는 Vue Router를 사용하여 탐색을 구현할 수 있습니다. Vue에서 탐색을 구현하는 방법에 대한 단계는 다음과 같습니다.

1단계: Vue Router 설치

npm 또는 Yarn을 사용하여 Vue 프로젝트에 Vue Router를 설치할 수 있습니다. 터미널 또는 명령줄에 다음 명령을 입력합니다.

npm install vue-router -save 或
yarn add vue-router

2단계: Vue 라우터 인스턴스 만들기

프로젝트에서 Vue 라우터 인스턴스를 만들어야 합니다. 프로젝트에서 main.js 파일을 열고 다음 코드를 입력하세요:

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

Vue 및 Vue Router를 가져오고 Vue Router 인스턴스를 생성하고 경로를 정의하는 것입니다. 라우팅은 Vue Router 인스턴스의 속성으로 path 속성은 라우팅 경로를 지정하는 데 사용되고, name 속성은 경로 이름을 지정하는 데 사용되고, component 속성은 Home과 같은 구성 요소를 지정하는 데 사용됩니다. , 정보 등

3단계: 라우팅 설정

Vue 프로젝트에서는 라우팅을 설정해야 합니다. App.vue 파일을 열고 다음 코드를 추가하세요:

<template>
  <div>
    <nav>
      <router-link>Home</router-link>
      <router-link>About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

라우터 링크 태그를 사용하여 탐색 모음에 링크를 추가하는 것입니다. 경로는 to 속성을 사용하여 지정됩니다. 이 경우 "/" 및 "/about"에 대한 링크가 있습니다. 또한 선택한 라우팅 구성 요소를 로드하려면 라우터 보기 구성 요소를 사용하세요.

4단계: 라우팅 사용

Vue 라우터 인스턴스를 생성하고 라우팅 및 링크를 설정했으므로 이제 구성 요소에서 라우팅을 사용할 수 있습니다. Home.vue 파일을 열고 다음 코드를 추가하세요:

<template>
  <div>
    <h1 id="Home-Page">Home Page</h1>
    <p>Welcome to my home page!</p>
  </div>
</template>

이제 About.vue를 열고 다음 코드를 추가하세요:

<template>
  <div>
    <h1 id="About-Page">About Page</h1>
    <p>Welcome to my about page!</p>
  </div>
</template>

이제 main.js를 열고 다음 코드를 추가하세요:

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

라우터 인스턴스를 Vue 인스턴스에 추가하고 $mount() 메서드를 사용하여 애플리케이션의 #app 요소에 Vue 인스턴스를 마운트합니다.

이제 Vue 애플리케이션을 다시 시작하고 브라우저에서 "/" 및 "/about" 경로로 이동하면 홈 및 정보 페이지가 표시됩니다.

이 기사에서는 Vue 애플리케이션에서 탐색을 구현하는 방법을 배웠습니다. 단계에는 Vue 라우터 설치, Vue 라우터 인스턴스 생성, 라우팅 설정 및 라우팅 사용이 포함됩니다. 이제 Vue 애플리케이션에 탐색을 추가하여 사용자가 애플리케이션을 쉽게 탐색하고 필요한 페이지에 액세스할 수 있도록 할 수 있습니다.

위 내용은 Vue에서 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!