Vue-router

Vue-router on vue.js -kirjasto sivujen reititykseen.

Käyttöönotto

Konffataan router

import Vue from 'vue'
import Router from 'vue-router'
import Home from './home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        }
    ]
})

ja lisätään se Vue -instanssiin

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

Reitit

Reitillä määritellään vähintään polku ja komponentti

// ...
import Home from './home.vue'
import ProductList from './products.vue'

export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        },
        {
            path: '/products',
            component: ProductList
        }
    ]
})

Polkuun voi määritellä myös parametreja laittamalla polun osan eteen :

{
    path: '/products/:id',
    component: ProductDetails
}

Reitille voi lisäksi määritellä nimen

{
    path: '/products/:id',
    name: 'ProductDetails',
    component: ProductDetails
}

Navigointi

Templatessa voi käyttää router-link -elementtiä

<router-link to="/products">Products</router-link>

<router-link :to="'/products/' + product.id">{{ product.name }}</router-link>

<router-link :to="{ name: 'ProductDetails', params: { id: product.id }}">{{ product.name }}</router-link>

Skriptissä on käytettävissä $router -objekti. push lisää uuden reitin entisten perään, jolloin selaimen edellinen-painike tuo takaisin nykyiselle sivulle. replace korvaa nykyisen reitin. go navigoi tietyn määrän sivuja eteen tai taakse

this.$router.push('/products');
this.$router.push({name: 'ProductDetails', params: { id: product.id }});
this.$router.go(-1); // edellinen sivu
this.$router.go(2); // 2 sivua eteenpäin

Parametrien lukeminen

Komponentissa on käytettävissä $route -objekti, jossa on nykyisen reitin tiedot

export default {
    methods: {
        load(){
            var id = this.$route.params.id;
            api.getProduct(id).then(data => {
                
            });
        }
    },
    created(){
        this.load();
    }
}

Parametrien muutosta voi tarkkailla normaalisti watch -metodilla

export default {
    watch: {
        '$route'(newRoute, oldRoute){
            this.load();
        }
    }
}

Alireitit

Alireitit laitetaan children -taulukkoon

{
    path: '/',
    component: Layout,
    children: [
        {
            path: '',
            component: Home
        },
        {
            path: 'products',
            component: ProductList
        }
    ]
}

Templatessa router-view -elementti korvataan reitin mukaisella komponentilla

<div id="app">
    <section>
        <main-menu />
    </section>
    <section>
        <router-view></router-view>
    </section>
</div>

Useampi komponentti/reitti

On mahdollista käyttää useampaa router-view -elementtiä. Tällöin ne täytyy nimetä (yksi voi olla nimetön => default)

<div id="app">
    <section>
        <router-view name="menu"></router-view>
    </section>
    <section>
        <router-view></router-view>
    </section>
</div>

Tällöin reittiin lisätään tieto mikä komponentti menee mihinkäkin näkymään

{
    path: 'products/:id',
    components: {
        menu: ProductMenu,
        default: ProductDetails
    }
}

Lisää parametrien välitystä

Reitteihin voi lisätä metatietoja, jotka eivät näy selaimen osoitepalkissa

{
    path: 'bugs',
    component: Issues,
    meta: { type: 'Bug' }
},
{
    path: 'feature-requests',
    component: Issues,
    meta: { type: 'FeatureRequest' }
}

Ja niihin pääsee kiinni $route.meta -kentästä

export default {
    created(){
        if(this.$route.meta.type === 'Bug'){
            api.getBugs().then(data => {
                // ...
            });
        }
        else if(this.$route.meta.type === 'FeatureRequest'){
            api.getFeatureRequests().then(data => {
                // ...
            });
        }
    }
}

query on vielä yksi tapa välittää parametreja komponentille

<router-link :to="{ name: 'ProductDetails', params: {id: product.id}, query: { tab: 'stock'}}"></router-link>

showProductStock(product){
    this.$router.push({ name: 'ProductDetails', params: {id: product.id}, query: { tab: 'stock'}});
}

Ja arvon saa luettua $route.query -kentästä

created(){
    this.tab = this.$route.query.tab;
}