vueがURLを変更しないのはなぜですか

Vue.js は、現在最も人気のある JavaScript フレームワークの 1 つです。これは、開発者が複雑なシングルページ アプリケーション (SPA) を迅速に構築するのに役立ちます。 Vue.js では、通常、コンポーネントを切り替えると URL アドレスが変更されます。ただし、場合によっては URL アドレスの変更を防ぐ必要があるため、この記事ではいくつかの実用的な方法を検討します。

プッシュメソッドではなく、Vue Router の replace メソッドを使用する

Vue Router は、Vue.js によって公式に提供されているルーティング マネージャーです。アプリケーション内のナビゲーションとルーティングを処理します。デフォルトでは、Vue Router はプッシュ方式を使用して、ナビゲーション中に URL アドレスを変更します。例:

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

URL アドレスを変更せずに別のページに移動する必要がある場合は、replace メソッドを使用できます。例:

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 の mode 属性を使用してルーティング モードを構成できます。例:

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

モードをハッシュに設定すると、Vue Router がナビゲートするときに完全な URL アドレスの代わりにハッシュ アドレスを使用できるようになります。

概要:

Vue.js では、Vue Router の replace メソッド、履歴 API、およびハッシュ アドレスを使用して、URL アドレスの変更を防止できます。 URL アドレスを変更する必要がある場合は、push メソッドを使用するか、window.location オブジェクトを変更します。特定のニーズに応じて、さまざまなソリューションを選択して実装します。

以上がvueがURLを変更しないのはなぜですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。