Introduction détaillée à la méthode de définition des paramètres de routage Vue

Vue est un framework JavaScript progressif avec en son cœur des vues basées sur les données et composées de composants. Vue Router est le gestionnaire de routage officiel de Vue.js. Il nous permet de localiser l'état de l'application via des routes et de restituer les composants appropriés à la demande de l'utilisateur.

Dans le routage Vue, nous pouvons définir des itinéraires dynamiques, qui contiennent des espaces réservés avec des paramètres. Par exemple, nous pouvons créer une route dynamique pour les détails de l'utilisateur, qui contient un paramètre correspondant à l'ID utilisateur. Ce paramètre peut être obtenu au sein du composant via l'objet $route.

Alors, comment définir les paramètres dans le routage Vue ? Cet article présentera en détail comment définir les paramètres de routage de Vue afin que vous puissiez mieux utiliser Vue Router.

1. Paramètres de base

Dans le routage Vue, nous pouvons définir les paramètres de routage des manières suivantes :

{
  path: '/user/:id',
  component: User
}

Dans l'exemple ci-dessus, nous avons défini un chemin "/user/:id" où ":id" indique le paramètre nom. Par exemple, lors de l'accès à "/user/123", la valeur du paramètre "id" sera "123".

Accéder à ce paramètre au sein du composant est très simple, il suffit d'utiliser l'attribut params de l'objet $route :

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  }
}

Dans le composant, on peut utiliser l'attribut props pour lier le paramètre "id" au composant. Au sein du composant, nous pouvons accéder à la valeur du paramètre "id" via this.$route.params.id.

2. Paramètres facultatifs

En plus des paramètres de base, nous pouvons également définir des paramètres facultatifs dans le routage Vue. Dans ce cas, le nom du paramètre est suivi d'un point d'interrogation "?"

{
  path: '/user/:id?',
  component: User
}

Dans l'exemple ci-dessus, ":id?" signifie que le paramètre "id" est facultatif. Nous n'obtenons pas de correspondance d'itinéraire incorrecte lors de l'accès au chemin "/user".

Au sein du composant, nous pouvons utiliser l'attribut query de l'objet $route pour accéder à la valeur du paramètre facultatif. Par exemple :

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id || this.$route.query.id
  }
}

Dans l'exemple ci-dessus, nous avons utilisé la syntaxe ES6 pour fournir une valeur par défaut. Si le paramètre "id" n'est pas fourni dans l'URL, nous utilisons l'attribut query pour l'obtenir.

3. Paramètres des paramètres nommés

En plus des paramètres de base et des paramètres facultatifs, nous pouvons également utiliser des paramètres nommés pour transférer en toute sécurité des paramètres entre les itinéraires. En utilisant des paramètres nommés, nous pouvons représenter plus explicitement les paramètres passés à la route.

Nous pouvons utiliser l'attribut "name" dans la définition de l'itinéraire pour spécifier un nom d'itinéraire. Par exemple :

{
  path: '/user/:id',
  component: User,
  name: 'user'
}

Dans l'exemple ci-dessus, nous avons spécifié le nom de la route comme "user" en utilisant l'attribut "name".

Au sein du composant, nous pouvons accéder à ce paramètre de nom via les objets dédiés "$router" et "$route". Par exemple :

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  },
  methods: {
    goBack () {
      this.$router.push({ name: 'user', params: { id: this.id } })
    }
  }
}

Dans l'exemple ci-dessus, nous utilisons le paramètre name pour définir la route et utilisons le nom de la route dans la méthode "goBack" pour renvoyer la route.

Dans le routage Vue, le paramétrage est très important. Les paramètres de base, les paramètres facultatifs et les paramètres nommés sont définis de différentes manières, nous devons donc comprendre ces différentes méthodes. Maintenant que vous savez comment définir ces paramètres, j'espère que cet article pourra vous aider à mieux utiliser Vue Router.

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!