vue가 페이지로 이동할 때 프롬프트를 표시하는 방법

Vue는 대화형 단일 페이지 웹 애플리케이션을 구축하는 데 매우 널리 사용되는 JavaScript 프레임워크입니다. Vue에는 많은 강력한 기능과 사용하기 쉬운 API가 있지만 라우팅 및 탐색과 함께 사용할 때 때로는 사용자에게 방문하려는 페이지를 알려주는 프롬프트를 팝업하는 방법을 찾아야 합니다.

이 기사에서는 Vue Router 및 Vue 구성 요소를 사용하여 이를 달성하는 간단한 방법을 살펴보겠습니다.

1단계: Vue Router 설치

Vue Router는 Vue 애플리케이션에 라우팅 기능을 제공하는 널리 사용되는 라우터 라이브러리입니다. 이 기사에서는 Vue Router를 사용하여 애플리케이션 탐색을 관리합니다.

Vue Router를 설치하려면 npm에서 설치해야 합니다. 다음 명령을 사용하여 애플리케이션에 Vue Router를 설치하세요.

npm install vue-router --save

설치가 완료되면 Vue 구성 요소에 라우터를 가져오고 Vue 애플리케이션의 일부로 구성하세요.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

위 코드에서는 두 개의 경로를 정의합니다. 하나는 Home 구성 요소를 가리키는 경로이고 다른 하나는 About 구성 요소를 가리키는 경로입니다. 이 간단한 예에서 애플리케이션에는 페이지가 두 개뿐이지만 더 많은 페이지와 경로를 추가하여 프로젝트 요구 사항에 맞게 조정할 수 있습니다.

2단계: 탐색 경고 추가

이제 Vue 라우터가 구성되었으므로 사용자가 다른 페이지로 이동하려고 할 때 경고를 표시하는 방법이 필요합니다.

이를 위해 Vue Router의 네비게이션 가드를 사용할 수 있습니다. Vue Router를 사용하면 라우팅 변경 전후에 라우팅 미들웨어를 추가할 수 있습니다. 탐색 전에 호출될 사전 라우팅 가드를 정의하고 사용자가 방문하려는 페이지에 대해 알리는 경고 상자를 표시합니다.

router.beforeEach((to, from, next) => {
  if (to.name !== 'Home') {
    if (window.confirm('你确定要离开这个页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
})

위 코드에서는 각 경로 전환 전에 호출될 beforeEach 가드를 정의했습니다. 이 가드에서는 사용자가 홈 페이지가 아닌 다른 페이지로 이동하려고 시도하는지 확인합니다. 그렇다면 사용자에게 이 작업이 확실한지 묻는 경고 상자가 표시됩니다. 사용자가 확인을 클릭하면 새 경로로 리디렉션됩니다. 사용자가 취소를 클릭하면 탐색이 취소됩니다.

마지막으로 Vue 구성 요소에서 이 경로 가드를 사용해야 합니다. Vue 구성 요소에서 라우터를 가져오고 라우터 후크 기능을 추가하면 됩니다. 예는 다음과 같습니다.

import router from './router'

export default {
  name: 'App',
  router,
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.name !== 'Home') {
        if (window.confirm('你确定要离开这个页面吗？')) {
          next()
        } else {
          next(false)
        }
      } else {
        next()
      }
    })
  }
}

위 코드에서는 App 구성 요소의 마운트된 메서드에 beforeEach 경로 가드를 추가했습니다.

결론

이 기사에서는 Vue Router 및 Vue 구성 요소를 사용하여 탐색 경고를 구현하는 간단한 방법을 소개했습니다. 이 접근 방식은 다소 번거롭지만 사용자에게 더욱 안전하고 안정적인 대화형 환경을 제공할 수 있습니다. Vue 및 Vue Router를 사용하는 경우 이 방법을 사용하여 애플리케이션에 추가 보안을 추가하세요.

위 내용은 vue가 페이지로 이동할 때 프롬프트를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!