0
votes

Mettre à jour les données parent lorsque l'utilisateur navigue sur un chemin d'itinéraire spécifique

Je suis nouveau dans Vuejs, essayant de configurer une application Web avec Vue-Route et souhaitez mettre à jour le style lorsque l'utilisateur navigue sur une URL spécifique, que ce soit. bar "directement ou" bar de navigation ". Dans ce cas, nous avons un composant parent contenant hauteur_status et certains sur gabarit.

J'ai fait la partie "bar de navigation" avec $ EMIT technique et ça fonctionne bien, mais j'ai essayé de l'utiliser sur créé Crochet de vie afin de mettre à jour l'en-tête chaque fois que le / home L'itinéraire est créé mais l'auditeur d'événements n'atteint pas le parent_component. Comment puis-je résoudre ça? Y a-t-il un meilleur moyen de le faire? Veuillez consulter le code ci-dessous:

`parent_component.vue xxx routeur.js xxx < hr> home.vue xxx`


                        
                        
                            
                                                                    vue.js
                                                                    vue-component
                                                                    vue-cli
                                                                    vue-router
                                                            
                        
                                                    
                            
                            
                                0 commentaires



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Pourquoi n'essayez-vous pas la classe de classe sur  itinéraire  ou  nom d'itinéraire  quelque chose comme:  xxx  
 ou  < Pré> xxx                                  


                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Bonne idée, la liaison de classe est la bonne réponse, mais cette condition ne fonctionne pas pour moi car il existe des noms de classe tels que  Head-h-s  et  Head-H-M . aussi  ceci. $ route  pourrait être quelque chose comme  ceci. $ route.path , dépend des conditions. J'ai donc édité votre réponse pour correspondre à la question. Merci @kcsujeet                                                

                                                
                                                                                    

                                    

                                                            

                        

                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous pouvez également changer le routeur: 
  routeur.js  strong>  p>  xxx  pré> 
 dans votre composant  p> 
 
  Parent_component.vue  strud>  p> 
<header :class="headerClass"></header>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     comme @kcsujeet dit, la liaison de classe est la bonne façon de le faire. Dans ce cas, nous devons examiner la condition  ceci. $ Route.path  code>. Si la valeur est égale à la valeur  / home  code> Sélectionnez  'Head-hm  code>, sinon sélectionnez  .head-hs  code>. 
 
routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }

                                

                                                                    
                                    
                                    
                                        0 commentaires