Quelles sont les trois façons de sauter dans le routage Vue ?

Méthode de saut : 1. Utilisez l'instruction "

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

router-view est l'endroit où le contenu de routage est implémenté. Lors de l'introduction des composants, écrivez l'endroit où ils doivent être introduits

Il convient de noter que lors de l'utilisation de vue-router pour contrôler le routage, router-view doit être utilisé comme conteneur.

Trois façons de passer par le routage

1. 🎜>

<router-link to=&#39;需要跳转到的页面的路径>

Lorsque le navigateur l'analyse, il l'analyse en une balise similaire à <

#div和css样式略
    <li >
        <router-link to="keyframes">点击验证动画效果 </router-link>
    </li>

N'oubliez pas d'introduire à l'avance le chemin qui doit être sauté sous router/index.js.

[Recommandation associée : "

tutoriel vue.js

"]

this.$router.push({ chemin : '/user'})

est souvent utilisé pour transmettre des paramètres dans le routage. L'utilisation est différente du troisième type

 :

1), introduction de la requête. méthode

les paramètres ne peuvent utiliser que le nom pour introduire les routes

et la requête doit utiliser le chemin pour introduire

2), la méthode de livraison de la requête

est similaire pour obtenir paramètres dans notre ajax, dans L'affichage des paramètres

les paramètres dans la barre d'adresse du navigateur sont similaires à la publication. Les paramètres ne sont pas affichés dans la barre d'adresse du navigateur

dans le fichier helloworld.vue

<template>
.....
<li @click="change">验证路由传参</li>
</template>
 
<script>
export default {
  data () {
    return {
      id:43,  //需要传递的参数
    }
  },
  methods:{
    change(){
      this.$router.push({  //核心语句
        path:&#39;/select&#39;,   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          id:this.id ,
        }
      })
    }
  }
}
</script>

.

dans select. Dans le fichier vue,

<template>
  <select>
          <option value="1" selected="selected">成都</option>
          <option value="2">北京</option>
  </select>
</template>
 
<script>
    export default{
        data(){
            return{
                id:&#39;&#39;,
            }
        },
        created(){  //生命周期里接收参数
            this.id = this.$route.query.id,  //接受参数关键代码
            console.log(this.id)
        }
    }
</script>

3 et this.$router.replace{path:'/'} sont similaires et ne seront pas décrits à nouveau

Pour plus de connaissances sur la programmation, veuillez visiter :Vidéo de programmation

 ! !

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!