Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-06-06 10:53:05
original
1731 Les gens l'ont consulté

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

, comme suit :

:default-active="$route.path"
Copier après la connexion

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 :

Copier après la connexion

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!

É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