Maison  >  Article  >  interface Web  >  Comment implémenter la navigation avec ElementUI dans vue-router

Comment implémenter la navigation avec ElementUI dans vue-router

亚连
亚连original
2018-06-06 10:53:051676parcourir

Maintenant, je vais partager avec vous un exemple d'utilisation de vue-router pour implémenter la navigation avec ElementUI. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Le routage est indispensable dans chaque projet. J'ai récemment appris à utiliser vue-router et ElementUI pour implémenter une barre de navigation. J'ai rencontré un problème lors du processus d'apprentissage : après avoir cliqué sur Actualiser sur le navigateur, la page est restée à The. emplacement d'origine, mais la navigation est la première par défaut.

Comme je n'ai pas été exposé au front-end depuis longtemps, je ne suis pas très clair sur le concept de routage. Après avoir écrit selon le document, je n'ai aucune idée par où commencer. mes collègues pour obtenir des conseils. La solution était d'utiliser la gestion vuex, mais vuex je n'y ai pas encore été exposé, donc ce problème a été mis en attente. J'étudiais à la maison ce week-end et j'ai accidentellement découvert que je pouvais utiliser $. route.path pour définir la navigation sélectionnée par défaut. Cependant, cela n'a eu aucun effet après l'avoir définie. Lors de l'actualisation, la page est toujours restée à la position d'origine et la navigation. Mais aucune d'entre elles n'a été sélectionnée. et je n'ai pas trouvé la réponse. Plus tard, je l'ai comparé avec un exemple sur Internet et j'ai découvert qu'un symbole de liaison devait être ajouté devant

default-active="$route.path"

, comme suit :

:default-active="$route.path"

Après avoir défini cette méthode, la navigation et la page peuvent être modifiées en même temps.

Pour le code de navigation complet, veuillez consulter ici :

Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée de l'utilisation de this.$emit dans vue.js

Comment implémenter des mots de passe dans vue Afficher la fonction de commutation de masquage

Comment utiliser le composant parent pour appeler les événements du composant enfant dans Vue

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!

Déclaration:
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