Comment Vue obtient-il le nom de la route et charge-t-il différentes données ?

Avec l'avancement continu de la technologie de développement front-end, de plus en plus de frameworks et de bibliothèques front-end sont largement utilisés dans le développement réel. Parmi eux, vue.js, en tant que l'un des frameworks front-end les plus populaires, est devenu l'un des plus populaires. frameworks préférés pour de nombreux développeurs d’applications Web. En vue, comment charger différentes données en fonction du nom de l'itinéraire obtenu après le saut d'itinéraire ? Cet article donnera une méthode de mise en œuvre.

1. vue-router

Dans la documentation officielle de vue, la bibliothèque du gestionnaire de routage vue-router est présentée lorsque l'application doit effectuer des sauts de page complexes et une gestion des statuts, l'utilisation de vue-router peut nous fournir une solution plus efficace. . vue-router possède des fonctions puissantes telles que le chargement asynchrone, les paramètres de routage, les hooks de navigation et le routage imbriqué. Son émergence offre également une commodité pour la construction d'applications Vue.

2. Saut de route et transfert de paramètres

Dans vue-router, nous utilisons généralement la méthode router-link ou $router.push() pour le saut de route. L'essence de ces deux méthodes est de changer l'adresse URL du saut de route. La transmission de paramètres lors des sauts de routage est également très simple. Il vous suffit d'ajouter des paramètres de requête ou de paramètres au lien de saut.

Par exemple, nous avons maintenant la configuration de routage suivante :

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

En même temps, nous devons passer un paramètre id lors du passage à l'itinéraire détaillé. Nous pouvons l'implémenter comme ceci :

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail&#39;, query: { id: 123 } }">Detail</router-link>

Comment obtenir les paramètres. passé par l'itinéraire dans le composant détail ? On peut faire ceci :

this.$route.query.id

Il est à noter ici que s'il s'agit d'un paramètre params, la méthode d'utilisation est légèrement différente. En plus de la nécessité d'utiliser le paramètre params lors du saut du lien, le chemin doit également être modifié pour inclure des paramètres dynamiques lors de la configuration de l'itinéraire. L'exemple est le suivant :

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

Lors du saut du lien, nous devons changer le paramètre. nom contenu dans l'objet params avec Les noms de paramètres déclarés dans la configuration de routage sont en correspondance biunivoque. L'exemple est le suivant :

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail/123&#39; }">Detail</router-link>

Lors de l'obtention des paramètres passés par la route dans le composant détail, il vous suffit de : utilisez $route.params.id.

3. Rendu dynamique des données

Dans les applications pratiques, nous devons parfois charger dynamiquement différentes données en fonction des noms d'itinéraires. Habituellement, nous pouvons obtenir les données en fonction du nom de la route et les restituer dans la fonction hook créée ou montée du composant. Par exemple :

export default {
  name: 'Detail',
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const name = this.$route.name
      if(name === 'detailA') {
        // 加载数据A
        axios.get('/api/detailA').then(res => {
          this.detailData = res.data
        })
      } else if(name === 'detailB') {
        // 加载数据B
        axios.get('/api/detailB').then(res => {
          this.detailData = res.data
        })
      }
      // ... 可以根据需要继续添加其他路由名称的loading操作
    }
  }
}

Dans l'exemple ci-dessus, nous déterminons le nom de la route actuelle en fonction de $route.name, puis envoyons la requête correspondante pour charger les données et les enregistrons dans l'attribut data du composant, puis restituons les données sur la page.

4. Résumé

Cet article présente principalement comment obtenir le nom de la route actuelle et charger différentes données en fonction du nom dans l'application vue. Nous pouvons utiliser les fonctions de saut de route et de passage de paramètres fournies par vue-router pour mapper les données à charger et le nom de la route, puis charger les données correspondantes en fonction du nom de la route dans la fonction hook créée ou montée du composant. Cette méthode de mise en œuvre est simple et pratique et peut également améliorer l'efficacité du développement.

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!