Vue 레이아웃에서 새 페이지를 표시하는 방법

Vue 프레임워크의 인기로 인해 점점 더 많은 웹 개발자가 Vue 프레임워크를 사용하여 포괄적인 웹 애플리케이션을 개발하기 시작했습니다. Vue의 문서와 커뮤니티도 Vue 사용자의 변화하는 요구 사항을 충족하기 위해 끊임없이 발전하고 있습니다. 그러나 Vue에서 완전한 레이아웃을 구현하려는 사람들이 가장 자주 묻는 질문은 레이아웃에 새 페이지를 표시하는 방법입니다. 이 문제가 발생하더라도 걱정하지 마십시오. 이 기사에서는 이를 해결하는 몇 가지 방법을 소개합니다.

Vue.js는 구성 요소, 템플릿, 라우팅을 포함한 다양한 개념을 사용합니다. 이러한 개념은 Vue 개발을 매우 유연하고 유지 관리하기 쉽게 만듭니다. 페이지 레이아웃의 경우 Vue는 개념 레이아웃을 제공합니다. 레이아웃은 헤더, 사이드바, 하단 및 기본 콘텐츠 영역을 포함한 페이지 레이아웃을 정의하는 데 사용되는 구성 요소입니다. Vue에서 레이아웃은 일반적으로 App.vue 구성 요소 또는 유사한 루트 구성 요소에 있으며 다른 하위 구성 요소를 포함합니다.

기존 웹 애플리케이션에서는 링크를 클릭하거나 양식을 제출하면 서버가 새 페이지를 제공합니다. 하지만 Vue에서는 일반적으로 Vue 라우터를 사용합니다. Vue Router는 애플리케이션에서 가능한 모든 경로와 이러한 경로에 해당하는 구성 요소를 정의할 수 있는 도구입니다. 즉, 새 HTML 페이지를 로드하는 대신 Vue 라우터를 활용하여 Vue 애플리케이션의 모든 구성 요소를 열 수 있습니다.

새 구성요소를 여는 몇 가지 Vue 라우터 메소드는 다음과 같습니다.

1. router.push()

router.push() 메소드를 사용하면 링크를 클릭하는 것과 유사하게 한 구성요소에서 다른 구성요소로 전환할 수 있습니다. 예:

this.$router.push('/dashboard');

이렇게 하면 "Dashboard"라는 구성 요소로 이동됩니다.

2. router.replace()

router.replace() 메서드를 사용하면 새 기록 항목을 추가하지 않고도 현재 경로 기록의 레코드를 바꿀 수 있습니다. 예:

this.$router.replace('/dashboard');

이렇게 하면 "Dashboard"라는 구성 요소로 이동하여 현재 경로 기록 항목이 대체됩니다.

3. router.go()

router.go() 메서드를 사용하면 기록에서 지정된 단계 수만큼 앞이나 뒤로 이동할 수 있습니다. 예:

this.$router.go(-1);

이것은 역사에서 한 걸음 뒤로 물러납니다.

Vue 라우터에서 이러한 방법을 사용하여 레이아웃에서 새 구성 요소를 엽니다. 레이아웃 구성 요소에 경로 보기를 정의하여 레이아웃 보기에 구성 요소를 표시할 수 있습니다. 이 접근 방식을 사용하면 모든 새 페이지가 레이아웃 내에서 열리는지 확인합니다.

다음은 레이아웃 구성 요소, 기본 보기 및 경로 보기가 포함된 샘플 .vue 파일의 코드입니다.

<template>
  <div id="app">
    <layout>
      <router-view />
    </layout>
  </div>
</template>

<script>
import Layout from './components/Layout.vue';

export default {
  components: {
    Layout
  },
};
</script>

위 코드에서는 먼저 레이아웃 구성 요소를 가져온 다음 템플릿에서 정의했습니다. 우리는 또한 정의에서 경로 보기를 사용합니다. 이 보기는 구성 요소 내부에서 열립니다.

라우터에서 경로를 보다 명확하게 정의하려면 라우터 개체에 다음 코드를 포함해야 합니다.

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard
    }
  ]
});

위에서는 두 개의 경로를 정의했는데, 하나는 /이고 다른 하나는 /dashboard입니다. 사용자가 URL에 액세스하면 라우터는 사용자가 액세스한 URL에 따라 홈 구성 요소 또는 대시보드 구성 요소를 엽니다.

완전한 Vue 애플리케이션에서는 위와 같이 다른 구성 요소를 레이아웃에 추가할 수 있습니다.

Summary

Vue JS에서 Layout 컴포넌트는 웹 페이지의 요소를 합리적으로 배포하는 방법입니다. Vue 라우터의 메소드를 사용하면 별도의 페이지에 로드하는 대신 레이아웃 구성요소 내부에서 새 구성요소를 열 수 있습니다. 이를 통해 페이지 전환 속도를 크게 높이고 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 위의 문제를 해결한 후에는 고품질 Vue 애플리케이션을 빠르게 개발하는 데 도움이 될 것이라고 믿습니다.

위 내용은 Vue 레이아웃에서 새 페이지를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!