Premiers pas avec Vue-router de Vue pour les applications à page unique

L’une des choses que j’aime le plus à propos de Vue.js est qu’il fonctionne sur les pages les plus simples avec les composants les plus simples. Vous n’avez pas besoin d’outils de construction compliqués ou d’arborescences de dépendances.

Cependant, Vue ne se limite pas à de simples composants. Vue-resource rend AJAX facile, vue-router configure le routage d’une seule page d’application sans presque aucun effort, et un jour j’apprendrai Vuex, je le promets.

Je veux vous montrer à quel point il est facile d’utiliser vue-router pour créer une application d’une seule page à l’aide de Vue. Et croyez-moi : c’est facile. Si vous avez déjà créé votre premier composant à l’aide de Vue, vous avez parcouru 90 % du chemin.

Mise en place

Comme c’est souvent le cas, je choisis Laravel Elixir comme outil de construction.

Vous pouvez utiliser n’importe quel système de construction qui vous donne accès à vos packages NPM, ou vous pouvez même extraire le package manuellement (via CDN) ou via Bower. À la fin, obtenez le vue-router package installé en quelque sorte. Si vous n’allez pas utiliser Elixir, sautez simplement la section suivante.

Installation de Vue et vue-router avec Laravel Elixir (facultatif)

Si vous allez démarrer un nouveau projet en utilisant Laravel Elixir, lisez la documentation pour les instructions d’installation de base. Puis ajouter vue et vue-router:

npm install vue vue-router --save

Ensuite, vous voudrez ajouter une tâche Browserify pour votre fichier JavaScript :

// gulpfile.js
elixir(function (mix) {
    mix.browserify('app.js');
});

Cela s’attend maintenant à ce que vous ayez un fichier à resources/assets/js/app.js et passera ce fichier via Browserify et Babel et le sortira à public/js/app.js. Créez la version ressources du fichier, puis exécutez gulp watch pour le faire fonctionner.

Tirer les dépendances

Dans votre fichier JavaScript principal, vous souhaiterez extraire Vue et vue-router en utilisant le système d’importation dont vous disposez :

var Vue = require('vue');
var VueRouter = require('vue-router');

Vue.use(VueRouter);
````

We pull in Vue and vue-router, and then we link them together. Now, let's write our app.

## Creating your application

Like in any Vue app, we need to create a base application. But unlike in other Vue apps, the core templating work we'll be doing is mapping certain routes to certain components. There's no new Vue concept like a "page"--each page is just a component, which may contain other components.

So, let's create our App and our router:

```javascript
var App = Vue.extend({});

var router = new VueRouter();

router.start(App, '#app');

C’est ça! Cela ne fera rien, puisque nous n’avons cartographié aucune route, mais nous venons de définir une application, de définir un routeur, de les relier, puis d’initialiser le routeur.

Mappage des itinéraires aux composants

Maintenant que nous avons une application et un routeur, définissons quelques routes :

var App = Vue.extend({});

var router = new VueRouter();

var Home = Vue.extend({
  template: 'Welcome to the <b>home page</b>!';
});

var People = Vue.extend({
  template: 'Look at all the people who work here!';
});

router.map({
  "https://mattstauffer.com/": {
    component: Home
  },
  '/people': {
    component: People
  }
});

router.start(App, '#app');

Nous avons maintenant défini deux itinéraires possibles dans notre application et mappé chacun avec un composant.

Construire la page HTML

Créons une page HTML pour contenir notre routeur. Malgré ce que vous pourriez penser, cette page n’a pas besoin d’être entièrement vide. Avec vue-router, votre application peut contenir du code qui n’est pas désactivé par les composants, par exemple une section de navigation.

...
<div id="app">
  <a v-link="{ path: "https://mattstauffer.com/" }"><h1>Our company</h1></a>
  <ul class="navigation">
    <li><a v-link="{ path: '/people' }">People</a></li>
  </ul>

  <router-view></router-view>
</div>
...

Supposons que cette page comporte des balises d’en-tête et d’emballage HTML, et importe également nos scripts et dépendances dans l’en-tête ou le pied de page quelque part.

Nous pouvons voir ici quelques pièces importantes. Tout d’abord, lorsque nous démarrons notre routeur dans notre fichier de script, nous l’avons lié à '#app'nous devions donc créer un élément de page avec l’ID “app” pour lier notre application Vue.

Deuxièmement, vous pouvez voir la syntaxe Vue pour les liens : en utilisant le v-link propriété et en lui passant un objet JSON. Pour l’instant, nous nous en tiendrons { path: '/url-here' }.

Si le lien que vous visitez actuellement est “actif”, ce qui signifie que l’utilisateur a ce lien ouvert, le routeur appliquera la classe v-link-active à ce lien, que vous pouvez ensuite styliser de manière unique. Vous pouvez également modifier cette classe ou l’appliquer à un élément connexe distinct comme un parent div ou li–Consultez la documentation pour en savoir plus.

Enfin, nous avons un <router-view> composant, qui est l’endroit où ira la sortie du composant de chaque page.

Si vous ouvrez cette page et que tout se charge correctement, vous avez maintenant votre première application d’une seule page utilisant vue-router !

Vous remarquerez peut-être qu’il utilise actuellement la navigation de style “hashbang”, où tous vos itinéraires sont ajoutés après #!. Vous pouvez désactiver cela, dont nous parlerons plus tard, mais cela prendra un peu de baratin de serveur, juste pour que vous soyez prêt.

Définition d’itinéraire plus avancée

Nous avons défini quelques itinéraires assez simples ci-dessus. Examinons un peu plus en détail les types de routes que vous pouvez définir avec vue-router.

Paramètres d’itinéraire

Vous allez probablement vouloir définir des routes à un moment donné qui sont plus qu’une simple URL statique. Nous appelons les URL qui peuvent correspondre à plusieurs URL des URL “dynamiques”. Apprenons à en définir un.

router.map({
  '/people/:personId': {
    component: {
      template: 'Person ID is {{$route.params.personId}}'
    }
  }
});

Nous pouvons apprendre quelques choses de cet exemple. Tout d’abord, nous pouvons voir que vue-router mappe les paramètres dynamiques en utilisant cette syntaxe : :paramName.

Deuxièmement, nous pouvons voir que vue-router vous permet de définir des objets composants en ligne, si vous le souhaitez.

Et troisièmement, nous pouvons voir que nous avons accès à un $route objet avec un params propriété qui est un objet de tous les paramètres d’URL dynamique correspondants.

Segments de route gourmands

Si vous souhaitez définir un segment de routage dynamique pouvant correspondre à plusieurs segments, utilisez un nom de définition de segment commençant par * au lieu de ::

router.map({
  '/people/*greedy' => {},
  '/people/*greedy/baz' => {},
});

Cette première définition d’itinéraire correspondra /people/a, /people/a/b, /people/a/b/c/d/e/f.

La deuxième définition d’itinéraire correspondra /people/a/baz, /people/a/b/c/d/e/f/g/bazetc.

Et les deux retourneront un greedy tronçon sur l’itinéraire : $route.params.greedyqui est égal à la chaîne complète de ce segment. /people/a/b/baz retournerais { greedy: 'a/b' }.

Itinéraires nommés

Si vous avez déjà utilisé des itinéraires Laravel, vous serez familiarisé avec l’idée de donner à un itinéraire donné un “nom” que vous pourrez utiliser pour vous y référer ultérieurement. Vous pouvez également le faire avec vue-router :

router.map({
  '/people/:personId': {
    name: 'people.show',
    component: People
  }
});

Vous pouvez ensuite créer un lien vers cet itinéraire avec v-link:

<a v-link="{ name: 'people.show', params: { personId: 5 }}">Person 5</a>

Naviguer vers un itinéraire en JavaScript

Nous avons vu comment v-link peut remplacer les liens normaux, mais que se passe-t-il si vous avez besoin de déclencher un événement de navigation dans votre JavaScript ? router.go() est votre ami:

router.go({ name: 'people.show', params : { personId: 5 }});

Vous pouvez aussi utiliser router.replace()qui fonctionne de la même manière sauf qu’il ne génère pas de nouvel enregistrement d’historique dans le navigateur.

Options de routeur

Lorsque vous instanciez l’objet routeur en haut de votre fichier JavaScript, vous pouvez éventuellement lui transmettre quelques propriétés de configuration.

coup de hache: Si vous le réglez sur falsele système utilisera les URL réelles (/people) au lieu d’URL hashbang (/#!/people). Si vous faites cela, vous voudrez activer histoire et configurez correctement votre serveur.
histoire: utilise l’état push de votre navigateur pour mettre à jour l’historique de votre navigateur lorsque vous naviguez sur le site. Nécessite que votre serveur soit configuré correctement
racine: Si votre application ne se trouve pas à votre racine Web, définissez cette propriété pour la navigation afin d’ajouter correctement le sous-répertoire dans lequel se trouve votre application. Par exemple, si votre application se trouve dans /appdéfinissez cette propriété sur /app afin que les URL vue-router soient générées de manière appropriée ; /app/people au lieu de simplement /people.

Si vous utilisez cette application dans une application Laravel, au lieu de configurer nginx ou Apache pour gérer l’état push sans hashbang, vous pouvez configurer votre application Laravel pour la gérer. configurez simplement une route de capture qui récupère toutes les URL valides et leur transmet la vue qui génère votre code Vue.
 Route::get('/{vue_capture?}', function () {
   return view('home');
 })->where('vue_capture', '[\/\w\.-]*');

Obtenir des informations d’itinéraire à l’intérieur de vos composants

Chaque composant de votre application aura accès à this.$route, qui est un “objet de contexte d’itinéraire” et expose des propriétés qui peuvent être utiles pour obtenir des informations sur votre itinéraire. Vos modèles auront également accès à cet objet en tant que $route.

$route.path est égal au chemin absolu ; par exemple /people
$route.params contient les paires clé/valeur de vos sections dynamiques ; par exemple { personId: 5 }
$route.query contient les paires clé/valeur de votre chaîne de requête ; par exemple /people?sortBy=names retournerais { sortBy : lastName }
$route.router renvoie l’instance vue-router
$route.matched renvoie les objets de configuration d’itinéraire pour chaque segment correspondant dans l’itinéraire actuel
$route.name renvoie le nom, s’il en a un, de la route courante

Vous pouvez également transmettre des données personnalisées dans vos composants en les transmettant dans la définition de route. Par exemple, je voulais qu’une certaine section de mon application soit réservée aux administrateurs, alors je l’ai transmise comme indicateur dans la définition, et j’étais sur le point de la vérifier dans mon composant comme $route.adminOnly.

router.map({
  '/secret-admin-panels': {
    component: SecretDashboard,
    adminOnly: true
  }
});

Fixation des crochets

Il m’a été possible de vérifier $route.adminOnly propriété dans mes composants, mais c’est quelque chose qui serait mieux géré avant même que les utilisateurs n’aient accès au composant, en utilisant quelque chose comme un middleware. Avec vue-router, ce seront des hooks de route, comme beforeEach:

// Sample means of checking user access
var MyUser = { admin: false };

router.beforeEach(function (transition) {
  if (transition.to.adminOnly && ! MyUser.admin) {
    transition.redirect('/login');
  } else {
    transition.next();
  }
});

Comme vous pouvez le voir, nous interceptons la demande avant le composant est rendu. Nous pouvons lui permettre d’avancer en utilisant transition.next()mais nous pouvons également intercepter l’utilisateur et rediriger ou abandonner transition.abort().

Il y a aussi un afterEach() accrocher.

Divers

Quelques notes rapides avant de terminer.

D’abord, <router-view> peuvent recevoir des props comme n’importe quel autre composant sur la page.

Deuxièmement, Vue dispose d’un pipeline de transition complet que vous pouvez utiliser pour définir le comportement de transition visuel et fonctionnel entre les pages.

Enfin, cet article n’est pas exhaustif ; assurez-vous de lire la documentation pour en savoir plus.

Final

C’est tout pour le moment. Vous pouvez voir à quel point il est simple de configurer votre première application d’une seule page à l’aide de Vue et vue-router, et à quel point la transition d’un composant unique à une application d’une seule page peut être fluide.

Si vous voulez voir un exemple (un peu) fonctionnel, mon application d’apprentissage en cours Suggestive utilise vue-router.