Comment sauter avec des paramètres dans vue.js

Méthode Vue.js de saut avec paramètres : 1. Définir l'itinéraire ; 2. Utiliser les paramètres de routage dans le composant ; 3. Effectuer un saut avec des paramètres.

Dans Vue.js, vous pouvez utiliser des paramètres de routage pour transmettre des données entre différentes pages. Ceci est généralement réalisé grâce à des paramètres de fragmentation dynamique des itinéraires. Voici les étapes générales pour sauter avec des paramètres dans Vue.js :

1 Définir l'itinéraire : Tout d'abord, définissez l'itinéraire avec des paramètres dans la configuration de routage de l'application Vue.js. Lors de la définition d'un itinéraire, vous pouvez utiliser deux points (:) pour spécifier les paramètres de fragment dynamique, qui seront transmis lors du passage à la page correspondante. Par exemple :

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

Dans l'exemple ci-dessus, nous avons défini une route nommée "user" avec un paramètre nommé "id". Cela signifie que lorsqu'un utilisateur accède à "/user/xxx", "xxx" sera transmis au composant correspondant en tant que paramètre "id".

2. Utiliser les paramètres de routage dans les composants : Dans les composants qui reçoivent des paramètres, les paramètres de routage sont accessibles via `$route.params`. Par exemple, dans l'exemple ci-dessus, le paramètre « id » passé est accessible via « $route.params.id » dans le composant User.

export default {
  created() {
    console.log(this.$route.params.id); // 输出路由参数
  }
}

3. Sauter avec des paramètres : Là où vous devez sauter avec des paramètres, vous pouvez utiliser le composant `router-link` fourni par vue-router ou effectuer une navigation d'itinéraire programmatique.

Utilisez `` :

<router-link :to="{ path: &#39;/user/&#39; + user.id }">用户详情</router-link>

Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur le lien "Détails de l'utilisateur", il accédera à la page "/user/xxx", où "xxx" est ` utilisateur La valeur de .id`.

Navigation de routage programmatique :

methods: {
  goToUserDetail(userId) {
    this.$router.push({ path: '/user/' + userId });
  }
}

Dans l'exemple ci-dessus, lorsque la méthode `goToUserDetail` est appelée, la navigation de routage et les paramètres sont transmis.

Ce qui précède sont les étapes générales pour sauter avec des paramètres dans Vue.js. En définissant des itinéraires avec des paramètres, en accédant aux paramètres d'itinéraire dans les composants et en utilisant `` ou la navigation par itinéraire par programmation, la fonction de saut avec des paramètres peut être implémentée dans les applications Vue.js.

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!