Quick example how to use routes and make your menu using Vue

Vue (ab)use router

A Quick example how to use routes and make your menu using vue.

<div id="app">
    <routing></routing>
    <div class="container pt-3 pb-3">
        <router-view></router-view>
    </div>
</div>

<script type="x-template" id="foo">
    <div>
        <h3>Foo</h3>

        <div class="card">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1490323948794-cc6dde6e8f5b?dpr=1&auto=compress,format&fit=crop&w=1200&h=600&q=60&cs=tinysrgb&crop=" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <router-link :to="{name: 'nope'}" class="btn btn-primary">Go somewhere</router-link>
            </div>
        </div>
    </div>
</script>

<script type="x-template" id="bar">
    <div>
        <h3>Pink banana</h3>

        <div class="card">
            <img class="card-img-top" src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?dpr=1&auto=compress,format&fit=crop&w=1200&h=600&q=60&cs=tinysrgb&crop=" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <router-link :to="{name: 'nope'}" class="btn btn-primary">Go somewhere</router-link>
            </div>
        </div>
    </div>
</script>

<script type="x-template" id="nope">
    <div class="jumbotron">
        <h3>Nope</h3>
        <p>Remember the route with no title, you can navigate to it!</p>
    </div>
</script>

<script type="x-template" id="routing">
    <nav class="navbar navbar-toggleable-md navbar-light bg-success navbar-inverse">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Vue (ab)use router</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item" v-for="route in routes">
                    <router-link :to="route" class="nav-link" active-class="active">
                        {{ route.title }}
                    </router-link>
                </li>
            </ul>
        </div>
    </nav>
</script>

// 1. Define route components.
var Foo = {
    template: '#foo'
};
var Bar = {
    template: '#bar'
};
var Nope = {
    template: '#nope'
};
Vue.component('routing', {
    template: '#routing',
    computed: {
        routes: function () {
            var routes = [];
            for (var i in this.$router.options.routes) {
                if (!this.$router.options.routes.hasOwnProperty(i)) {
                    continue
                }
                var route = this.$router.options.routes[i];
                if(route.hasOwnProperty('title')) {
                    routes.push(route);
                }
            }
            return routes;
        }
    }
});

// 2. Define some routes
var routes = [{
    name: 'foo',
    title: 'Foo fighter',
    path: '/foo',
    component: Foo
}, {
    name: 'bar',
    title: 'Bar stool',
    path: '/bar',
    component: Bar
}, {
    name: 'nope',
    path: '/nope',
    component: Nope
}, {
    path: '*',
    redirect: {
        name: 'foo'
    }
}];

// 3. Create the router instance and pass the `routes` option
var router = new VueRouter({
    routes // short for routes: routes
});

// 4. Create and mount the root instance.
var app = new Vue({
    router
}).$mount('#app');

// Now the app has started!

Live demo

#vuejs #javascript #vue-js