uniapp 새로 고침 후 경로가 손실됨

uniapp을 사용하여 애플리케이션을 개발할 때 페이지 새로 고침 후 경로 손실 문제가 자주 발생합니다. 이 문제는 개발 과정에서 매우 흔히 발생하지만 해결하는 것은 그리 어렵지 않습니다. 이 기사에서는 이 문제의 원인과 해결 방법을 살펴보겠습니다.

1. 경로상실 문제는 왜 발생하나요?

uniapp에서는 라우팅 관리를 위해 vue-router를 사용합니다. vue-router에서는 라우팅 관리가 브라우저의 URL 주소를 통해 구현됩니다. 페이지를 새로 고치면 브라우저가 페이지를 다시 로드하고 URL 주소도 새로 고치므로 라우팅 손실 문제가 발생합니다.

이 문제를 더 잘 이해하기 위해 먼저 vue-router의 라우팅 모드를 살펴보겠습니다. vue-router는 해시와 히스토리라는 두 가지 라우팅 모드를 제공합니다. 해시 패턴은 # 기호로 시작하는 URL 주소 부분을 나타냅니다(예: http://example.com/#/home). 기록 모드는 # 기호가 포함되지 않은 URL 주소 부분을 나타냅니다(예: http://example.com/home).

해시 모드에서는 window.location.hash를 통해 라우팅 관리가 구현됩니다. 페이지를 새로 고칠 때 브라우저는 페이지를 다시 로드하고 window.location.hash는 변경되지 않으므로 라우팅 정보가 손실되지 않습니다. 기록 모드에서는 window.location.pathname을 통해 라우팅 관리가 구현됩니다. 페이지를 새로 고치면 브라우저가 페이지를 다시 로드하고 window.location.pathname이 변경되어 라우팅 정보가 손실되는 문제가 발생합니다.

2. 경로 손실 문제를 피하는 방법은 무엇입니까?

경로 손실 문제를 피하기 위해 다음과 같은 조치를 취할 수 있습니다.

1. 해시 모드 사용을 강제합니다.

uniapp에서는 main에서 모드 속성을 설정하여 해시 모드를 강제로 사용할 수 있습니다. js.js. 샘플 코드는 다음과 같습니다.

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  mode: 'hash', // 强制使用hash模式
  render: h => h(App)
})

2. 페이지 새로고침 전 라우팅 정보 저장

window.onbeforeunload 이벤트에서 localStorage에 라우팅 정보를 저장할 수 있습니다. 코드 예시는 다음과 같습니다.

mounted() {
  // 监听onbeforeunload事件，保存路由信息
  window.onbeforeunload = () => {
    localStorage.setItem('lastRoute', this.$route.fullPath)
  }
}

페이지가 로드된 후 localStorage에 lastRoute가 있는지 확인하여 이전 라우팅 페이지로 이동해야 하는지 여부를 결정할 수 있습니다. 코드 예시는 다음과 같습니다.

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

3. 루트 점프 전 후크 기능 사용

각 루트 점프 전 beforeEach 후크 함수를 사용하여 점프 전 현재 라우팅 정보를 저장하고 이후 복원할 수 있습니다. 페이지가 새로 고쳐집니다. 라우팅 상태입니다. 코드 예시는 다음과 같습니다.

router.beforeEach((to, from, next) => {
  localStorage.setItem('lastRoute', from.fullPath) // 保存当前路由信息
  next()
})

페이지가 로드된 후 localStorage에 lastRoute가 있는지 확인하여 이전 라우팅 페이지로 이동해야 하는지 여부를 결정할 수 있습니다. 코드 예시는 다음과 같습니다.

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

요약:

라우팅 손실은 uniapp 개발에서 흔히 발생하는 문제이지만 위의 세 가지 방법을 통해 이 문제를 쉽게 피할 수 있습니다. uniapp을 사용하여 애플리케이션을 개발할 때 vue-router의 라우팅 모드를 완전히 이해하고 경로 손실 문제를 해결하기 위한 적절한 조치를 취해야 합니다.

위 내용은 uniapp 새로 고침 후 경로가 손실됨의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!