Comment vue détermine-t-il vers quel conteneur accéder ?

Vue est l'un des frameworks JavaScript les plus populaires aujourd'hui et est souvent utilisé pour créer des applications et des sites Web d'une seule page. Une question courante est de savoir comment déterminer à quel conteneur accéder dans Vue. Cet article explorera différentes manières de résoudre ce problème.

1. Utilisez Vue Router

Vue Router est le gestionnaire de routage officiel pour Vue.js. Il vous permet de définir des itinéraires pour différentes URL et fournit un mécanisme pour mettre à jour les URL tout en restituant les composants correspondants dans le conteneur approprié. Pour utiliser Vue Router, vous devez l'installer et l'ajouter à votre application Vue.

Tout d'abord, installez Vue Router :

npm install vue-router --save

Ensuite, vous devez ajouter Vue Router en tant que plugin dans votre application Vue :

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Ensuite, définissez vos itinéraires. Disons que votre application Vue comporte deux composants : Accueil et À propos. Pour définir des itinéraires pour ces deux composants, vous pouvez écrire du code comme ceci :

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Dans cet exemple, le chemin / restituera le composant Home, tandis que le chemin /about rendra le composant About.

Enfin, créez l'instance VueRouter dans votre application Vue :

const router = new VueRouter({
  routes
})

Vous pouvez maintenant utiliser le composant router-link dans votre composant Vue pour convertir vers l'itinéraire défini :

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

le composant router-link s'affiche sous la forme d'un lien pour naviguer la page vers l'itinéraire spécifié.

2. Utilisez l'attribut $refs de Vue

Une autre façon consiste à utiliser l'attribut $refs de Vue. Cela vous permet d'ajouter des références aux composants Vue et de les référencer facilement lorsque vous avez besoin d'accéder aux composants. Pour ajouter une référence dans un composant Vue, utilisez l'attribut ref comme indiqué ci-dessous :

<template>
  <div>
    <div ref="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

Dans cet exemple, nous ajouterons une référence nommée "conteneur" à l'élément div. Pour accéder à la référence, utilisez this.$refs.container dans le composant Vue.

Vous pouvez également utiliser la propriété $route de Vue pour obtenir l'itinéraire actuel et utiliser la propriété $watch de Vue pour écouter les changements d'itinéraire. Cela vous permet de mettre à jour le conteneur lorsque la route change, comme ceci :

<template>
  <div>
    <div ref="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    '$route.path': function (newValue, oldValue) {
      this.updateContainer()
    }
  },
  methods: {
    updateContainer: function () {
      // 获取当前路由
      const path = this.$route.path
      
      // 获取容器元素
      const container = this.$refs.container
      
      // 清空容器
      container.innerHTML = ''
      
      // 根据当前路由更新容器
      if (path === '/home') {
        // 在容器中添加Home组件
        // ...
      } else if (path === '/about') {
        // 在容器中添加About组件
        // ...
      }
    }
  }
}
</script>

Dans cet exemple, nous utiliserons la propriété $watch de Vue pour surveiller $route.path afin que la méthode updateContainer soit appelée lorsque la route change. Cette méthode obtient l'itinéraire actuel et les éléments du conteneur et met à jour le conteneur en fonction de l'itinéraire actuel.

3. Utilisation de la méthode querySelector de JavaScript

Enfin, vous pouvez également utiliser la méthode querySelector de JavaScript pour trouver le conteneur dans lequel restituer le composant Vue. querySelector vous permet de sélectionner des éléments par ID, classe, balise, etc. puis de les retrouver dans le DOM.

Ce qui suit est un exemple d'utilisation de la méthode querySelector :

<template>
  <div>
    <div id="container">
      <!-- 容器代码 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted: function () {
    // 查找容器元素
    const container = document.querySelector('#container')
    
    // 根据路由更新容器
    if (this.$route.path === '/home') {
      // 在容器中添加Home组件
      // ...
    } else if (this.$route.path === '/about') {
      // 在容器中添加About组件
      // ...
    }
  }
}
</script>

Dans cet exemple, nous utilisons la méthode querySelector dans la méthode de cycle de vie montée du composant pour trouver l'élément conteneur. Nous mettons ensuite à jour le conteneur en fonction de l'itinéraire actuel.

Conclusion

Il existe de nombreuses façons différentes de déterminer sous quel conteneur sauter dans Vue. L'utilisation de Vue Router est une approche populaire qui vous permet de définir des routes d'URL et de restituer le bon composant Vue en cas de besoin. Une alternative consiste à utiliser la propriété $refs de Vue, qui vous permet de référencer les composants Vue et d'y accéder en cas de besoin. Enfin, vous pouvez également utiliser la méthode querySelector de JavaScript pour rechercher le conteneur dans lequel restituer le composant Vue. Quelle que soit l'approche que vous choisissez, vous devez vous demander si elle correspond à la structure et aux besoins de votre application Vue.

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!