Séance 4

Vue-router

https://router.vuejs.org/en/

Vue-router va nous permettre de gérer les "routes" de notre application, c’est à dire les composants à charger en fonction de l’URL.

/login → Charger composant login
/home → charger composant home
etc…

Étape 1 : Introduction

Exécutez et analysez le code suivant :

etape2.html

<!DOCTYPE html>
<html>
<head>
    <title>Étape 2</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }
        
        const routes = [
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar }
        ]
        
        const router = new VueRouter({
          routes 
        })
        
        const app = new Vue({
            el :"#app",
            router
        })
    </script>
</body>
</html>

router-view est une balise Vue qui contient le composant chargé par Vue-router.

Étape 2 : Routes dynamiques

Définissez la route suivante :
{ path: '/:var', component: DisplayVar }
Et le composant DisplayVar avec le template suivant :
template: '<div>Variable de la route : {{ $route.params.var }}</div>'
La variable $route permet de manipuler et d’accéder aux paramètres de la route (this.$route.params)
Définissez la route /:var1/:var2 et affichez les 2 paramètres de l’URL dans un composant correspondant.

Étape 3 : Name views

Sur votre page HTML, ajoutez en dessous du router-view les 2 balises suivantes :
```
<router-view name="a"></router-view>
<router-view name="b"></router-view>
```
Définissez la route suivante :

{
    path: '/multiple/:var',
    components: {
        default: Foo,
        a: Bar,
        b: DisplayVar
    }
}

Vous pouvez ainsi définir plusieurs composants pour une même route.

Par exemple sur une page on aura 3 composants qui peuvent changer en fonction de la route : Header, Sidebar, Content.

Étape 4 : Projet

Modifiez le code de la séance 3 pour éditez un film sur une nouvelle page

Renseignez-vous sur router-link et this.$router.push pour naviguer entre les pages :

https://router.vuejs.org/en/essentials/navigation.html

Attention : Lorsque vous importez Vue et Vue-router à l’aide de import, il faudra indiquer à Vue l’existence du plugin via la ligne suivante :

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

Comment partager des données entre les pages

Dans le main.js, créer l’objet qui contiendra les variables partagées par toute l’application :

window.shared_data = {
    mavariable: 'Test'
}

Dans chaque composant où vous souhaitez accéder à ces variables, il faut créer une variable data de cette façon :

data: {
    shared_data: window.shared_data
}

Vous pourriez ensuite l’utiliser dans vos templates et vos méthodes :

{{ shared_data.mavariable }}

methods: {
    test: function() {
        this.shared_data.mavariable;
    }
}