Vue가 점프할 때 헤더를 구성하는 방법

Vue는 단일 페이지 애플리케이션(SPA)을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue에서는 애플리케이션 탐색 및 페이지 이동이 라우팅을 통해 제어됩니다. 사용자가 Vue 라우팅을 통해 페이지로 이동할 때 헤더를 구성하는 방법은 무엇입니까? 이 글에서는 Vue 경로 점프 시 헤더를 구성하는 방법을 자세히 소개합니다.

Vue 라우터란 무엇인가요?

Vue Router는 Vue의 공식 라우팅 관리 라이브러리로, URL을 기반으로 경로를 일치시킨 다음 해당 구성 요소를 표시할 수 있습니다. Vue Router는 페이지 간 전환과 매개변수 전달을 도와줄 수도 있으며 경로 가드, 경로 지연 로딩 등과 같은 일부 고급 기능을 구현할 수도 있습니다.

Vue Router 사용 단계

1단계: Vue 프로젝트 만들기

이미 Vue.js를 사용하여 프로젝트를 빌드하고 있다면 이 단계를 건너뛸 수 있습니다. 처음이시라면 먼저 Vue.js를 설치해주세요. 구체적인 설치 방법은 공식 홈페이지(https://cn.vuejs.org/)를 참고하세요.

2단계: Vue Router 설치

npm 패키지 관리자를 통해 Vue Router를 설치할 수 있습니다. 다음 명령을 입력하세요.

$ npm install vue-router -save

3단계: Vue Router 인스턴스 만들기

Vue.js에서 Vue Router를 사용하는 것은 매우 간단합니다. 모든 경로를 관리하는 Vue Router 인스턴스를 생성해야 합니다. main.js 파일에 Vue Router를 도입하고 다음과 같이 Vue Router 인스턴스를 생성합니다.

import Vue from 'vue'; // 导入Vue
import VueRouter from 'vue-router'; // 导入Vue Router
import App from './App.vue'; // 导入根组件
import routes from './routes'; // 导入路由配置

Vue.use(VueRouter); // 安装Vue Router

const router = new VueRouter({
  routes // 配置路由规则
});

new Vue({
  el: '#app',
  router, // 注入路由实例
  render: h => h(App) // 渲染根组件
});

위 코드에서는 먼저 Vue, Vue Router, App 구성 요소 및 라우팅 구성 파일을 가져옵니다.

그런 다음 Vue.use(VueRouter)를 통해 Vue Router를 설치합니다. 다음으로, new VueRouter()를 통해 Vue Router 인스턴스를 생성하고 라우팅 구성을 인스턴스에 전달합니다.

마지막으로 루트 구성 요소의 라우터 옵션에 경로 인스턴스를 삽입합니다. 이런 식으로 애플리케이션 전체에서 Vue Router 인스턴스를 사용할 수 있습니다.

4단계: 라우팅 규칙 정의

Vue Router에서 라우팅 규칙을 정의하는 것은 매우 간단합니다. 아래와 같이 배열의 각 요소는 라우팅 규칙을 나타냅니다.

import Home from './views/Home.vue';
import About from './views/About.vue';
import Contact from './views/Contact.vue';
import NotFound from './views/NotFound.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  },
  {
    path: '*',
    name: 'not-found',
    component: NotFound
  }
];

export default routes;

위 코드에서는 '/', '/about', '/contact', ''의 네 가지 라우팅 규칙을 정의합니다. 그 중 '/'는 홈페이지를 의미하고, ''는 404페이지를 의미한다.

5단계: 라우팅 구성 요소 사용

Vue Router에서 각 라우팅 규칙은 구성 요소에 해당할 수 있습니다. 라우팅 규칙을 정의할 때 각 라우팅 규칙에 해당하는 구성 요소를 지정했습니다. 이제 App.vue 구성 요소의 라우팅 구성 요소를 사용하여 다양한 페이지를 표시해야 합니다.

App.vue에서는 아래와 같이 태그를 사용하여 현재 라우팅 규칙에 해당하는 구성 요소를 표시합니다.

<template>
  <div id="app">
    <header>
      <!-- 配置header -->
    </header>
    <router-view></router-view>
  </div>
</template>

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

위 코드에서는 Vue 구성 요소를 사용하면 Vue는 라우팅 규칙을 통해 다양한 라우팅 구성 요소를 동적으로 표시합니다. 여기에 정적 HTML 코드와 CSS 스타일을 추가하여 헤더를 작성할 수도 있습니다.

6단계: 헤더 구성

Vue 라우터는 경로 점프 전에 실행되는 전역 후크 beforeEach()를 제공합니다. 이 후크에서 헤더 내용을 동적으로 수정할 수 있습니다.

main.js 파일에 다음 코드를 추가합니다.

router.beforeEach((to, from, next) => {
  const title = to.meta.title;

  if (title) {
    document.title = title;
  }

  next();
});

위 코드에서는 현재 라우팅 규칙에 메타 속성이 정의되어 있는지 확인합니다. 정의된 경우 메타 속성의 제목 값이 할당됩니다. 헤더.

요약

이 글에서는 Vue Router가 점프할 때 헤더를 구성하는 방법을 자세히 설명합니다. Vue Router에서 제공하는 태그를 사용하여 라우팅 구성 요소를 동적으로 표시하는 동시에 전역 후크 beforeEach()의 헤더 내용을 동적으로 수정하여 더 나은 사용자 경험을 얻을 수 있습니다. 이 글이 Vue Router를 사용할 때 헤더를 구성하는 데 도움이 되기를 바랍니다.

위 내용은 Vue가 점프할 때 헤더를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!