Comment Vue sait-il que la barre d'adresse a changé ?

En tant que framework frontal populaire, Vue.js (Vue en abrégé) fournit aux développeurs des outils de gestion de routage flexibles pour faciliter le changement de page et le contrôle dans les applications à page unique.

Cependant, nous devons parfois apporter des réponses lorsque l'adresse de routage change. Par exemple, nous souhaitons afficher un contenu différent en fonction des paramètres de l'adresse, ou afficher différentes barres de navigation en fonction de différents itinéraires.

Alors, comment surveiller les changements dans la barre d'adresse dans Vue ? Cet article présentera deux méthodes :

1. Utiliser le garde de routage de Vue-Router

Vue-Router est un plug-in officiellement fourni par Vue.js pour gérer le routage SPA (Single-Page Application). Grâce à Vue-Router, nous pouvons facilement contrôler le routage entre les composants.

Vue-Router fournit la fonction de gardes de navigation ([navigation guards](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)), qui est l'une des fonctions les plus utiles de Vue -Routeur un. Un garde-route est une fonction qui contrôle le comportement de navigation d'un itinéraire.

Dans Route Guard, nous pouvons utiliser la fonction beforeEach pour surveiller les changements d'itinéraire. Chaque fois que l'itinéraire change, cette fonction sera appelée et passée dans les trois paramètres to, from et next. beforeEach函数来监听路由变化。每当路由变化时，该函数会被调用，并传入三个参数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

to est l'itinéraire cible vers lequel sauter, from est l'itinéraire actuel, next est une fonction utilisée pour contrôler l'étape suivante. Comment faire aller. Lorsque nous appellerons la fonction next, la route continuera à sauter.

Par exemple, supposons que nous souhaitions surveiller les changements d'itinéraire et restituer un contenu textuel différent en fonction du paramètre d'itinéraire id :

rrreee

Dans le garde d'itinéraire, nous transmettons à.params.id Obtenir l'identifiant du paramètre de routage et déterminer s'il existe. S'il existe, continuez à sauter, sinon ne sautez pas. 🎜🎜De cette façon, lorsque nous saisissons <code>/post/1 dans la barre d'adresse, le composant Post obtiendra le contenu de l'article de blog avec l'ID 1 et le restituera sur la page. Lorsque nous saisissons /post/ dans la barre d'adresse, le saut n'aura pas lieu. 🎜🎜L'utilisation de Route Guard de Vue-Router est une méthode simple et flexible qui permet de facilement surveiller les changements dans la barre d'adresse. 🎜🎜2. Utilisez l'attribut watch de Vue🎜🎜En plus de Vue-Router, Vue lui-même fournit également un mécanisme de liaison de données réactif. En surveillant les modifications des données, nous pouvons apporter certaines réponses lors des modifications de routage. 🎜🎜Le mécanisme réactif de Vue est implémenté via l'attribut watch. Cette propriété est utilisée pour surveiller les modifications des données sur l'instance Vue et exécuter la fonction de rappel correspondante lorsque les données changent. 🎜🎜Nous pouvons surveiller les modifications des paramètres de routage et effectuer les opérations correspondantes lorsque les paramètres changent. Par exemple : 🎜rrreee🎜Dans cet exemple, nous écoutons les changements dans $route.params.id et exécutons la fonction de rappel correspondante fetchPostContent lorsque l'identifiant change. Lors du premier montage, nous devons également exécuter manuellement la fonction fetchPostContent une fois pour obtenir le contenu initial de l'article de blog. 🎜🎜L'utilisation de l'attribut watch de Vue peut nous aider à surveiller les changements dans les paramètres de routage et à contrôler la barre d'adresse. 🎜🎜En bref, Vue propose une variété de méthodes pour contrôler le comportement de routage dans les applications monopage, et les développeurs peuvent choisir la méthode qui leur convient en fonction de leurs propres besoins. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!