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)
Utilisation :
<router-link to="demo2">demo2</router-link>
<router-link :to="'demo2'">demo2</router-link> <!-- 也可以用{}包裹对应的path或name --> <router-link :to="{ name: 'demo2' }">demo2</router-link>
<router-link :to="{ name: 'demo2', 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
<router-link :to="{ path: 'demo2', query: { plan: 'private' }}">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
Partie du modèle :
<button @click="toURL">跳转页面</button>
Partie du script :
(notez ici le routeur, ci-dessus la route)
methods:{ toURL(){ this.$router.push({ path: '/demo2' }) } }
methods:{ toURL(){ this.$router.push({ name: 'demo2', params: { userId: 123 }}) } }
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!