ユニアプリの更新後にルートが失われる

uniapp を使用してアプリケーションを開発する場合、ページの更新後にルートが失われるという問題がよく発生します。この問題は開発において非常に一般的ですが、解決するのはそれほど難しいことではありません。この記事では、この問題の原因と解決策について詳しく説明します。

1. ルートロスの問題はなぜ起こるのでしょうか?

uniapp ではルーティング管理に vue-router を使用します。 vue-router では、ブラウザの URL アドレスを通じてルーティング管理が実装されます。ページを更新すると、ブラウザはページを再読み込みし、URL アドレスも更新するため、ルーティング損失の問題が発生します。

この問題をよりよく理解するために、まず vue-router のルーティング モードを見てみましょう。 vue-router は、ハッシュとヒストリーという 2 つのルーティング モードを提供します。ハッシュ パターンは、# 記号で始まる 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 の mode 属性を設定して、ハッシュ モードの使用を強制できます。サンプル コードは次のとおりです。

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)
  }
}

ページがロードされた後、lastRoute が localStorage に存在するかどうかを判断することで、前のルーティング ページにジャンプする必要があるかどうかを判断できます。コード例は次のとおりです。

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()
})

ページがロードされた後、lastRoute が localStorage に存在するかどうかを判断することで、前のルーティング ページにジャンプする必要があるかどうかを判断できます。コード例は次のとおりです。

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

概要:

ルート損失はユニアプリ開発における一般的な問題ですが、上記の 3 つの方法でこの問題を簡単に回避できます。 uniapp を使用してアプリケーションを開発する場合、vue-router のルーティング モードを十分に理解し、経路損失の問題を解決するために適切な対策を講じる必要があります。

以上がユニアプリの更新後にルートが失われるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。