Maison > interface Web > js tutoriel > Explication détaillée des étapes pour définir dynamiquement les paramètres de routage dans Vue

Explication détaillée des étapes pour définir dynamiquement les paramètres de routage dans Vue

php中世界最好的语言
Libérer: 2018-04-27 09:22:31
original
2644 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes de définition dynamique des paramètres de routage dans Vue. Quelles sont les précautions pour la définition dynamique des paramètres de routage dans Vue. cas pratique, jetons un coup d'oeil.

Les paramètres de routage peuvent être définis dynamiquement dans vue :

1 Utilisez this.$router.go(), identique à js histroy.go() , avant 1, arrière -1, page actuelle : 0<.>

Notez que lorsque vous utilisez go, vous devez déjà avoir un historique d'accès

Cas :

<template>
  <p> 
    <button @click="goht">后退<button> <br/>
    <button @click="goqj">前进<button> <br/>
    <button @click="gosx">刷新当前<button>
  </p>
 </template>
 <script>
  export default {
    methods: {
     goht(){
       this.$router.go(-1);
     },
     goqj(){
        this.$router.go(1);
     },
     gosx(){
       this.$router.go(0); //或者 this.$router.go(); 
     }
    }
  }
 </script>
Copier après la connexion

Utiliser l'appel push :

Cas

<template>
  <p>
     <button @click="pageA">去A页面</button> <br/>
     <button @click="pageB">去B页面</button> <br/>
  </p>
</template>
<script> 
 exprot default {
  methods: {
     pageA(){
        //去路由A页面,字符串形式只能是path,类似to="path"
       this.$router.push('/RouterA'); 
     },
     pageB(){
        //去路由B页面,数组形式,类似 :to="{}"
       this.$router.push(
         {
          name: 'RouterB',
          query: {'name': 'name1', title: 'title1'}
          //,params:{'name': 'name2', title: 'title2'}
         }
       );
     }
   }
 }
</script>
Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment adapter les images dans l'applet WeChat à la hauteur du modèle

Comment utiliser jquery pour définir la une nouvelle fenêtre ouvre un lien externe

Aperçu de l'image jquery au rapport spécifié lors du téléchargement (avec code)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal