VueJS - Routage
VueJS n'a pas de fonction de routeur intégrée. Nous devons suivre quelques étapes supplémentaires pour l'installer.
Téléchargement direct depuis CDN
La dernière version de vue-router est disponible sur https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com fournit des liens cdn basés sur npm. Le lien ci-dessus est toujours mis à jour vers la version récente. Nous pouvons le télécharger et l'héberger, et l'utiliser avec une balise de script avec vue.js comme suit -
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>Utilisation de NPM
Exécutez la commande suivante pour installer la vue-router.
npm install vue-routerUtiliser GitHub
Nous pouvons cloner le référentiel à partir de GitHub comme suit -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildCommençons par un exemple simple utilisant vue-router.js.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
Pour commencer le routage, nous devons ajouter le fichier vue-router.js. Prenez le code dehttps://unpkg.com/vue-router/dist/vue-router.js et enregistrez-le dans le fichier vue-router.js.
Le script est ajouté après vue.js comme suit -
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>Dans la section corps, il y a un lien de routeur défini comme suit -
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>est un composant utilisé pour naviguer vers le contenu HTML à afficher pour l'utilisateur. La propriété to est la destination, c'est-à-dire le fichier source où le contenu à afficher sera sélectionné.
Dans le morceau de code ci-dessus, nous avons créé deux liens de routeur.
Jetez un œil à la section de script où le routeur est initialisé. Il y a deux constantes créées comme suit -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }Ils ont des modèles, qui doivent être affichés lorsque le lien du routeur est cliqué.
Ensuite, est la route const, qui définit le chemin à afficher dans l'URL.
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];Les itinéraires définissent le chemin et le composant. Le chemin ie/route1 sera affiché dans l'URL lorsque l'utilisateur clique sur le lien du routeur.
Le composant prend les noms de modèles à afficher. Le chemin des routes doit correspondre au lien du routeur vers la propriété.
Par exemple, <router-link to = ”path here”> </router-link>
Ensuite, l'instance est créée sur VueRouter à l'aide du morceau de code suivant.
const router = new VueRouter({
routes // short for `routes: routes`
});Le constructeur VueRouter prend les routes comme paramètre. L'objet routeur est attribué à l'instance de vue principale à l'aide du morceau de code suivant.
var vm = new Vue({
el: '#app',
router
});Exécutez l'exemple et voyez l'affichage dans le navigateur. En inspectant et en vérifiant le lien du routeur, nous verrons qu'il ajoute une classe à l'élément actif, comme indiqué dans la capture d'écran suivante.
La classe ajoutée est class = “router-link-exact-active router-link-active”. Le lien actif obtient la classe comme indiqué dans la capture d'écran ci-dessus. Une autre chose à noter est que le <router-link> est rendu sous forme de balise.
Accessoires pour la liaison du routeur
Voyons quelques autres propriétés à passer à <router-link>.
à
C'est le chemin de destination donné au <router-link>. Lorsque vous cliquez dessus, la valeur de to sera transmise à router.push () en interne. La valeur doit être une chaîne ou un objet de localisation. Lors de l'utilisation d'un objet, nous devons le lier comme indiqué par exemple dans 2.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.Voici la sortie de par exemple 3.
Dans le chemin de l'URL, name = Tery fait partie de la chaîne de requête. Par exemple: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery
remplacer
L'ajout de replace au lien du routeur appellera le router.replace() au lieu de router.push(). Avec replace, l'historique de navigation n'est pas stocké.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>ajouter
L'ajout d'ajout au <lien-routeur> <lien-routeur> rendra le chemin relatif.
Si nous voulons passer du lien du routeur avec chemin / route1 au chemin du lien du routeur / route2, il affichera le chemin dans le navigateur comme / route1 / route2.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>marque
À l'heure actuelle, <router-link> est rendu sous forme de balise. Dans le cas où nous voulons le rendre comme une autre balise, nous devons spécifier la même chose en utilisant tag = "tagname";
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Nous avons spécifié la balise comme span et c'est ce qui est affiché dans le navigateur.
La balise affichée maintenant est une balise span. Nous verrons toujours le clic en cours lorsque nous cliquons sur le lien du routeur pour la navigation.
classe active
Par défaut, la classe active ajoutée lorsque la liaison de routeur est active est liaison de routeur active. Nous pouvons remplacer la classe en définissant la même chose que celle indiquée dans le code suivant.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>La classe utilisée est active_class = ”_active”. Il s'agit de la sortie affichée dans le navigateur.
classe-active-exacte
La classe exacteactive par défaut appliquée est router-link-exact-active. Nous pouvons l'écraser en utilisant exact-active-class.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>C'est ce qui s'affiche dans le navigateur.
un événement
À l'heure actuelle, l'événement par défaut pour le lien du routeur est l'événement de clic. Nous pouvons changer la même chose en utilisant la propriété event.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>Maintenant, lorsque nous survolons le lien du routeur, il naviguera comme indiqué dans le navigateur suivant. Passez la souris sur le lien 1 du routeur et nous verrons la navigation changer.
