Comment implémenter le saut de page dans vuejs

Méthode Vuejs pour implémenter le saut de page : 1. Utilisez l'instruction "..." 2. Utilisez "this.$router". push({chemin : 'adresse url de la page' })".

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

Deux façons d'implémenter le saut de page dans le routage Vue (router-link et JS)

1 Via le composant

est utilisé. lien de navigation pour changer de contenu HTML

Utilisation :

• Méthode d'écriture simple

<router-link to="demo2">demo2</router-link>

• Utiliser la méthode d'écriture v-bind

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• Comment écrire

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

Pour passer des paramètres ici, vous devez configurer le chemin de demo2 dans router.js Après demo2 dans le chemin, ajoutez le caractère générique : et le userId correspondant, comme suit :

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
  },

Après le la configuration est terminée, la page Le résultat du saut est /demo2/123

Le "123" ici est le userId

alors, comment récupérer le paramètre passé userId dans la nouvelle page ?

Utilisez this.$route.params.xx dans le hook Mounted Obtenez les paramètres transmis, comme suit :

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

• Entrez la paire clé-valeur d'adresse

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

Page. jump Le résultat du transfert est /demo2?plan=private

(notez qu'il n'est pas nécessaire de configurer le chemin dans router.js)

Obtenez le plan de paire clé-valeur d'adresse transmis dans la nouvelle page , qui peut être dans Mounted Utilisez this.$route.plan.xx dans le hook pour obtenir la paire clé-valeur d'adresse transmise, comme suit :

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

2 Implémenté via JS ---this. $router.push()

Partie du modèle :

<button @click="toURL">跳转页面</button>

Partie du script :

(notez ici le routeur, ci-dessus la route)

• Manière simple d'écrire

methods:{
  toURL(){
      this.$router.push({ path: '/demo2' })
  }
}

• Comment pour écrire des paramètres

methods:{
  toURL(){
      this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}

• Paire clé-valeur d'adresse entrante

methods:{
  toURL(){ 
     this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}

Recommandations associées : "tutoriel 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!