Vue はアドレス バーが変更されたことをどのようにして認識するのでしょうか?

人気のフロントエンド フレームワークとして、Vue.js (略して Vue) は、単一ページ アプリケーションでのページ切り替えと制御を容易にするいくつかの柔軟なルーティング管理ツールを開発者に提供します。

ただし、場合によっては、ルーティング アドレスが変更された場合に何らかの対応が必要になることがあります。たとえば、アドレスのパラメータに基づいて異なるコンテンツをレンダリングしたり、異なるルートに基づいて異なるナビゲーション バーを表示したりする必要があります。

それでは、Vue のアドレス バーの変更を監視するにはどうすればよいでしょうか?

1. Vue-Router のルート ガードを使用する

Vue-Router は、SPA (Single-Page Application) ルーティング プラグインを管理するために Vue.js によって公式に提供されています。 Vue-Router を通じて、コンポーネント間のルーティングを簡単に制御できます。

Vue-Router は、最も人気のある機能であるルーティング ガード ([ナビゲーション ガード](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)) 機能を提供します。 Vue-Router の便利な機能の 1 つです。ルート ガードは、ルートのナビゲーション動作を制御する機能です。

ルーティング ガードでは、beforeEach 関数を使用してルーティングの変更を監視できます。ルートが変更されるたびに、この関数が呼び出され、3 つのパラメーター to、from、next に渡されます。

to はジャンプ先のターゲット ルート、from は現在のルート、next は次のステップを制御するために使用される関数です取ること。 next 関数を呼び出すと、配線は引き続きジャンプします。

たとえば、ルーティングの変更を監視し、ルーティング パラメータに基づいてさまざまなテキスト コンテンツをレンダリングするとします。 id:

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/post/:id',
      component: Post
    }
  ]
})

// Post组件定义
<template>
  <div>
    {{ postContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      postContent: ''
    }
  },
  mounted() {
    this.fetchPostContent()
  },
  methods: {
    async fetchPostContent() {
      const id = this.$route.params.id // 从路由参数中获取id
      this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
    }
  }
}
</script>

// 路由守卫监听
router.beforeEach((to, from, next) => {
  const id = to.params.id
  if (id !== undefined) { // 如果传入id参数，则修改文本内容
    next()
  } else { // 否则不进行跳转
    next(false)
  }
})

ルーティング ガードで、to.params.idルーティング パラメータ ID を取得し、それが存在するかどうかを確認します。存在する場合はジャンプを続け、存在しない場合はジャンプしません。

このように、アドレス バーに /post/1 と入力すると、Post コンポーネントは ID 1 のブログ投稿のコンテンツを取得し、ページ上に表示します。アドレスバーに /post/ と入力するとジャンプは起こりません。

Vue-Router のルート ガードの使用は、アドレス バーの変更を簡単に監視できるシンプルで柔軟な方法です。

2. Vue の watch 属性を使用する

Vue-Router に加えて、Vue 自体も応答性の高いデータ バインディング メカニズムを提供します。データの変更を監視することで、ルーティングの変更時に何らかの対応を行うことができます。

Vue の応答メカニズムは、watch 属性を通じて実装されます。このプロパティは、Vue インスタンス上のデータ変更を監視し、データ変更時に対応するコールバック関数を実行するために使用されます。

ルーティングパラメータの変化を監視し、パラメータが変化したときに対応する操作を実行できます。例:

// Post组件定义
<template>
  <div>
    {{ postContent }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      postContent: ''
    }
  },
  watch: {
    // 监听路由参数id的变化
    '$route.params.id'(newId, oldId) {
      this.fetchPostContent(newId)
    }
  },
  mounted() {
    this.fetchPostContent(this.$route.params.id)
  },
  methods: {
    async fetchPostContent(id) {
      this.postContent = await fetch('/api/posts/' + id).then(response => response.json())
    }
  }
}
</script>

この例では、$route.params.id の変更をリッスンし、ID が変更されたときに対応するコールバック関数 fetchPostContent を実行します。初めてマウントするときは、fetchPostContent 関数を手動で実行して、最初のブログ投稿コンテンツを取得する必要もあります。

Vue の watch 属性を使用すると、ルーティング パラメーターの変更を監視し、アドレス バーを制御するのに役立ちます。

つまり、Vue はシングルページ アプリケーションでのルーティング動作を制御するさまざまな方法を提供しており、開発者は自分のニーズに応じて適切な方法を選択できます。

以上がVue はアドレス バーが変更されたことをどのようにして認識するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。