Maison > interface Web > Voir.js > le corps du texte

Comment implémenter le saut de page dans vuejs

青灯夜游
Libérer: 2021-09-28 14:44:12
original
14863 Les gens l'ont consulté

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' })".

Comment implémenter le saut de page dans vuejs

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>
Copier après la connexion
  • 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>
Copier après la connexion
  • Comment écrire

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>
Copier après la connexion

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
  },
Copier après la connexion

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
Copier après la connexion
  • Entrez la paire clé-valeur d'adresse

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>
Copier après la connexion

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
Copier après la connexion

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

Partie du modèle :

<button @click="toURL">跳转页面</button>
Copier après la connexion

Partie du script :

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

  • Manière simple d'écrire

methods:{
  toURL(){
      this.$router.push({ path: '/demo2' })
  }
}
Copier après la connexion
  • Comment pour écrire des paramètres

methods:{
  toURL(){
      this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}
Copier après la connexion
  • Paire clé-valeur d'adresse entrante

methods:{
  toURL(){ 
     this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}
Copier après la connexion

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!

É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