vue는 어떻게 URL을 변경하지 않습니까?

Vue.js는 현재 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. 이는 개발자가 복잡한 단일 페이지 애플리케이션(SPA)을 빠르게 구축하는 데 도움이 됩니다. Vue.js에서 구성 요소를 전환하면 일반적으로 URL 주소가 변경됩니다. 그러나 URL 주소 변경을 방지해야 하는 경우도 있으므로 이 기사에서는 몇 가지 실용적인 방법을 살펴보겠습니다.

푸시 방식 대신 Vue Router의 교체 방식을 사용하세요

Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자입니다. 애플리케이션 내에서 탐색 및 라우팅을 처리합니다. 기본적으로 Vue Router는 push 메소드를 사용하여 탐색하는 동안 URL 주소를 변경합니다. 예:

this.$router.push('/new-page')

URL 주소를 변경하지 않고 다른 페이지로 이동해야 하는 경우 교체 방법을 사용할 수 있습니다. 예:

this.$router.replace('/new-page')

기록 API 사용

HTML5은 페이지를 새로 고치지 않고도 URL 주소를 변경할 수 있는 window.history 개체를 제공합니다. Vue.js에서는 기록 API를 사용하여 URL 주소를 변경하지 않고도 페이지 탐색을 구현할 수 있습니다.

먼저, 브라우저 기록 개체에 새 상태를 추가하려면 History.pushState 메서드를 사용해야 합니다. 예:

history.pushState({}, '', '/new-page')

이렇게 하면 브라우저 주소 표시줄의 URL 주소가 /new-page로 변경되지만 페이지가 다시 로드되지는 않습니다. 다음으로 새 페이지의 콘텐츠가 표시되도록 Vue.js 애플리케이션의 구성 요소를 업데이트해야 합니다. Vue Router의 watch 속성을 사용하여 URL 주소의 변경 사항을 수신하여 애플리케이션의 구성 요소를 업데이트할 수 있습니다. 예:

// 在Vue Router的路由配置中
const routes = [
  {
    path: '/new-page',
    component: NewPageComponent
  }
]

// 在Vue.js组件中
export default {
  watch: {
    $route(to, from) {
      // 在这里更新组件内容
    }
  }
}

마지막으로 사용자가 브라우저 기록에서 앞뒤로 탐색할 수 있도록 하려면 History.replaceState 메서드를 사용하여 애플리케이션의 현재 상태를 새 상태로 바꿔야 합니다. 예:

history.replaceState({}, '', '/new-page')

해시 주소 사용

Vue.js에서는 해시 주소를 사용하면 URL 주소 변경을 피할 수 있습니다. 해시 주소는 # 문자로 시작하는 URL 주소 부분을 나타냅니다. 해시 주소를 사용할 때 브라우저는 페이지를 다시 로드하지 않고 클라이언트 내에서 탐색합니다. 예:

this.$router.push('/#new-page')

Vue.js에서는 Vue Router의 모드 속성을 사용하여 라우팅 모드를 구성할 수 있습니다. 예:

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: HomeComponent
    },
    {
      path: '/new-page',
      component: NewPageComponent
    }
  ]
})

모드를 해시로 설정하면 Vue 라우터가 탐색할 때 전체 URL 주소 대신 해시 주소를 사용하도록 할 수 있습니다.

요약:

Vue.js에서는 Vue Router의 교체 방법, 기록 API 및 해시 주소를 사용하여 URL 주소 변경을 방지할 수 있습니다. URL 주소를 변경해야 하는 경우 push 메소드를 사용하거나 window.location 객체를 수정할 수 있습니다. 특정 요구 사항에 따라 구현할 다양한 솔루션을 선택하세요.

위 내용은 vue는 어떻게 URL을 변경하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!