Comment transmettre des paramètres entre les composants vue-router
Cette fois, je vais vous présenter la méthode de transmission des paramètres entre les composants vue-router. Quelles sont les précautions pour transmettre les paramètres entre les composants vue-router. Ce qui suit est un cas pratique, jetons un coup d'œil. .
Utiliser VueRouter pour implémenter des sauts entre composants : transfert de paramètres, le contenu spécifique est le suivant
connexion ---nom d'utilisateur--->main
①Effacer l'expéditeur et le destinataire
②Configurez l'adresse de routage du récepteur
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component :TestComponent}
③Le récepteur obtient les données transmises
this.$route.params.id
④Lors du saut, envoyez le paramètre
this.$router.push('/myTest/20')
Code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</p>
<script>
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
<p>
<h1>主页面用户名:{{uName}}</h1>
</p>
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
<p>
<h1>登录页面</h1>
<input type="text" v-model="userInput" placeholder="请输入用户名">
<button @click="toMain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userInput">登录到主页面</router-link>
</p>
`
})
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
<router-link to="/login">返回登录页</router-link>
</p>
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</p>
<script>
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<p>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productList">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</p>
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<p>
<h4>这是详情页</h4>
<p>这是id为：{{myIndex}}的产品</p>
</p>
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
</p>
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>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 :
Que diriez-vous de l'applet WeChat Activer le téléchargement des images sur le serveur
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Que sont les fichiers d'optimisation de la livraison dans Windows 11 et pouvez-vous les supprimer ?
Sep 29, 2023 pm 04:09 PM
L'optimisation de la livraison est une fonctionnalité qui permet à Windows Update et au Windows Store d'exécuter et de fournir des mises à jour plus rapidement. Les fichiers cache dans Delivery Optimization sont censés être supprimés après un certain temps, mais pour certains de nos lecteurs, ils continuent de s'accumuler et d'occuper de l'espace inutile. Est-il sécuritaire de supprimer les fichiers d’optimisation de la livraison ? Oui, il est possible de supprimer les fichiers d’optimisation de livraison en toute sécurité, et dans cet article, vous découvrirez à quel point il est facile de le faire sous Windows 11. Bien qu’il ne soit pas recommandé de supprimer manuellement les fichiers d’optimisation de diffusion, il est possible de le faire automatiquement. Comment supprimer les fichiers d’optimisation de livraison sur Windows 11 ? Cliquez sur la barre de recherche, tapez Nettoyage de disque et ouvrez l'outil à partir des résultats. Si vous disposez de plusieurs lecteurs, sélectionnez le lecteur avec votre système (généralement C :
J'ai rencontré l'erreur vue-router « NavigationDuplicate : navigation redondante évitée vers l'emplacement actuel » dans mon application Vue - comment la résoudre ?
Jun 24, 2023 pm 02:20 PM
L'erreur vue-router « NavigationDuplicate:Avoidedredundantnavigationtocurrentlocation » rencontrée dans l'application Vue – comment la résoudre ? Vue.js devient de plus en plus populaire dans le développement d'applications frontales en tant que framework JavaScript rapide et flexible. VueRouter est une bibliothèque de codes de Vue.js utilisée pour la gestion du routage. Cependant, parfois
Un article qui explique le routage Vue en détail : vue-router
Sep 01, 2022 pm 07:43 PM
Cet article vous donnera une explication détaillée du Vue-Router dans le bucket de la famille Vue et en apprendra davantage sur les connaissances en matière de routage. J'espère qu'il vous sera utile !
Vue et Vue-Router : Comment partager des données entre composants ?
Dec 17, 2023 am 09:17 AM
Vue et Vue-Router : Comment partager des données entre composants ? Introduction : Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Vue-Router est le gestionnaire de routage officiel de Vue, utilisé pour implémenter des applications monopage. Dans les applications Vue, les composants sont les unités de base pour créer des interfaces utilisateur. Dans de nombreux cas, nous devons partager des données entre différents composants. Cet article présentera quelques méthodes pour vous aider à réaliser le partage de données dans Vue et Vue-Router, et
Comment résoudre le problème « Erreur : composant de route invalide : xxx » lors de l'utilisation de vue-router dans une application Vue ?
Jun 25, 2023 am 11:52 AM
Vue est un framework frontal populaire qui permet aux développeurs de créer rapidement des applications Web efficaces et réutilisables. Vue-router est un plug-in du framework Vue qui aide les développeurs à gérer facilement le routage et la navigation des applications. Cependant, lorsque vous utilisez Vue-router, vous rencontrez parfois une erreur courante : "Error:Invalidroutecomponent:xxx". Cet article expliquera les causes et les solutions à cette erreur. La raison réside dans Vu
Comment résoudre le problème « Erreur : navigation redondante évitée vers l'emplacement actuel » lors de l'utilisation de vue-router dans l'application Vue ?
Jun 24, 2023 pm 05:39 PM
Lors de l'utilisation de vue-router dans une application Vue, le message d'erreur « Erreur : navigation redondante évitée vers l'emplacement actuel » apparaît parfois. Ce message d'erreur signifie « éviter une navigation redondante vers l'emplacement actuel » et est généralement provoqué par un clic répété sur le même lien ou par l'utilisation du même chemin de routage. Alors, comment résoudre ce problème ? Utilisez le modificateur exact lors de la définition du routeur
Vue-Router : Comment utiliser les méta-informations de routage pour gérer les itinéraires ?
Dec 18, 2023 pm 01:21 PM
Vue-Router : Comment utiliser les méta-informations de routage pour gérer les itinéraires ? Introduction : Vue-Router est le gestionnaire de routage officiel de Vue.js, qui peut nous aider à créer rapidement des applications monopage (SPA). En plus des fonctions de routage courantes, Vue-Router prend également en charge l'utilisation de méta-informations de routage pour gérer et contrôler le routage. Les métainformations de routage sont un attribut personnalisé qui peut être attaché à une route, ce qui peut nous aider à implémenter une logique spéciale ou un contrôle d'autorisation. 1. Qu'est-ce que les métainformations de routage ? Les méta-informations de routage sont
Comment résoudre le problème « Erreur : échec de la résolution du composant asynchrone : xxx » lors de l'utilisation de vue-router dans une application Vue ?
Jun 24, 2023 pm 06:28 PM
L'utilisation de vue-router est un moyen courant d'implémenter le contrôle de routage dans les applications Vue. Cependant, lors de l'utilisation de vue-router, l'erreur « Erreur : Failedtoresolveasynccomponent : xxx » se produit parfois, qui est causée par une erreur de chargement de composant asynchrone. Dans cet article, nous explorerons ce problème et proposerons des solutions. Comprendre le principe du chargement asynchrone des composants. Dans Vue, les composants peuvent être créés de manière synchrone ou asynchrone.
