Vue-Router: 기록 모드를 사용하여 새로 고침 없는 라우팅을 구현하는 방법은 무엇입니까?

Vue-Router: 기록 모드를 사용하여 새로 고침 없는 라우팅을 구현하는 방법은 무엇입니까?

소개:
인기 있는 JavaScript 프레임워크인 Vue.js는 프런트엔드 개발에 널리 사용되었습니다. Vue.js에서 Vue-Router는 단일 페이지 애플리케이션(SPA)의 라우팅 관리를 구현할 수 있는 매우 중요한 도구입니다. Vue-Router에는 선택할 수 있는 두 가지 모드가 있습니다. 하나는 해시 모드이고 다른 하나는 히스토리 모드입니다. 이 기사에서는 Vue-Router의 기록 모드를 사용하여 새로 고침 없는 라우팅을 구현하고 특정 코드 예제를 제공하는 방법을 자세히 설명합니다.

1. 히스토리 모드 이해하기
   Vue-Router에서 히스토리 모드를 사용할 때 URL에 # 문자가 없지만 탐색 전환에는 브라우저의 History API가 사용됩니다. 이 모드에서는 경로가 더욱 아름답고 기존 URL 경로에 더 가까워 보입니다.
2. 기록 모드 사용 시작
   기록 모드 사용은 매우 간단합니다. Vue Router 인스턴스를 생성할 때 모드 속성을 'history'로 설정하기만 하면 됩니다. 예:

//引入Vue和Vue-Router
import Vue from 'vue'
import Router from 'vue-router'

//在Vue中使用Vue-Router插件
Vue.use(Router)

//定义路由
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

//创建Vue实例，并将router实例添加到Vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. 서버 구성
   기록 모드를 사용할 때 URL 요청에 응답하도록 서버를 구성해야 합니다. 히스토리 모드에서는 페이지를 새로 고치거나 URL에 직접 접근할 때 서버에 요청이 전송되기 때문에 동일한 홈페이지(예: index.html)를 반환하도록 서버를 구성해야 합니다.

Apache 및 Nginx와 같은 일반적인 서버 소프트웨어에서는 구성 파일을 통해 이를 달성할 수 있습니다. 다음은 Apache 서버 구성 예입니다.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

4. 새로 고침 없이 페이지 이동
   기록 모드를 사용한 후 Vue-Router는 자동으로 브라우저의 탐색 이벤트를 수신하고 사용자가 페이지의 링크를 클릭하면 구성 요소가 전체 페이지를 새로 고치지 않고 전환하여 새로 고침 없는 라우팅을 활성화합니다.

홈과 정보라는 두 페이지가 있다고 가정해 보겠습니다. 홈 페이지에서 정보 페이지로 연결되는 버튼을 추가할 수 있습니다:

<template>
  <div>
    <h1>Welcome to Home Page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

정보 페이지에서 홈 페이지로 연결되는 버튼을 추가할 수도 있습니다:

<template>
  <div>
    <h1>Welcome to About Page!</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

사용자가 이 링크를 클릭하면 페이지가 해당 구성 요소로 직접 전환을 새로 고치지 않습니다.

5. 요약
   Vue-Router의 기록 모드는 브라우저의 History API를 사용하여 새로 고침 없는 경로 전환을 구현합니다. 기록 모드를 사용하면 URL이 더욱 아름답고 기존 URL 경로에 더 가깝게 보일 수 있습니다. 기록 모드를 사용하는 경우 URL 요청에 응답하기 위해 동일한 홈 페이지를 반환하도록 서버를 구성해야 합니다. Vue-Router에서 제공하는 라우터 링크 구성 요소를 사용하면 새로 고침 없는 라우팅을 쉽게 구현할 수 있습니다.

위 단계를 통해 Vue-Router의 기록 모드를 쉽게 사용하여 새로 고침 없는 라우팅을 구현할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 Vue-Router: 기록 모드를 사용하여 새로 고침 없는 라우팅을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!