Creating navigation using vue router

So i was using vue router the other day and i did not like to manually set up a routed, then having to create a piece of html in my navigation to actually link to that route. Too much hassle. Lets make this easier.

If you just want to skip to the code, check my codepen.

Setting things up

So i got the getting started page of the vue router and build upon it some things. I created three routes, two of them i wanted in my navigation. Since routes are just JavaScript objects i added a title on the two i wanted in my menu.

{
    name: 'bar',
    title: 'Bar stool',
    path: '/bar',
    component: Bar
}

Name, the name of my route. Title, the label i want to use in my menu. The rest is just the basics.

Building routes

Now then, getting routes in my components. I crated a component named routing. In this component i have a couple of options, i used the computed property from vue to … compute the routes. But first, where are the routes. I found a $router in my component.

this.$router.options.routes

Here are all the routes, but i only want the routes with a title so i can manage witch route i use in my navigation. I can just show the function but for the hell of it, my complete component.

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;
        }
    }
});

Done! If the route has a property named title i add it in my routes collection.

Creating a template

In my template for the routing i just used some bootstrap so it looks nice. Again, just stole some html from the navbar component. And i just removed the static links and added my routes, computed from my component.

<li class="nav-item" v-for="route in routes">
    <router-link :to="route" class="nav-link" active-class="active">
        {{ route.title }}
    </router-link>
</li>

Again, just that simple. Add the route and show the title, witch already was mandatory. Note the active class set to active, bootstrap likes that.

My complete template here.

<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="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>

        <div class="collapse navbar-collapse" id="navbar">
            <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>

Like i said, just copied useful information from the bootstrap demo.

Then i just added some templates on the component to make it fancy, but this is it. Create routes and be in control the items you want in your navigation.

You can check the complete example on codepen. I did add a pink banana there, just so you know.