Let’s route a vue app

So last time we installed vue and started with a template in Let’s buid a vue app. Now we need to setup some pages, vue uses vue-router 2 to route page. Let’s check it out.

The vue webpack starter already contains the vue router, if you did not use the starter pack just install:

npm install vue-router

Creating routes

In the starter pack we have one view called Hello, found in the views folder. I did rename this to Dashboard because i want to make a dashboard in my app, and we set it to the main page. We setup an index.js in a router folder. The file will look something like this.

import Vue from 'vue';
import Router from 'vue-router';
import Dashboard from '@/views/Dashboard';
Vue.use(Router);

const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    title: 'Dashboard',
    component: Dashboard,
  },
  {
    path: '*',
    redirect: { name: 'dashboard' },
  },
];

export default new Router({
  routes,
});

Code

Let’s check the code. Import Vue from vue and Router from vue-router. Things we use. Next we import the Dashboard route. Next we set the path, name, title and component to our route. Named '/dashboard', 'dashboard', 'Dashboard' and component Dashboard. The last without the quotes because we imported it as a component.

Next we set up a default route, easy to use to redirect people to your base route. So on the last route we set up a route with a path of '*' (or other route). And we redirect the route to the route with the name 'dashboard'. Like we set up in the dashboard route.

Note that we added a title on the route, in a navbar component i did use the Creating navigation using vue router to build my navbar. I don’t know if i will get into the details of that.

Import the routes

In the main.js in the src folder we have the router setup in our app. This is what it should be, somewhat.

import Vue from 'vue';
import App from './App';
import router from './router';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

So we import Vue, we import App as our main page and we import router from the folder ./router. Importing from ./router will search for a file named router.js, or a folder named router and will search for a index.js in that folder. We have that index.js in the folder so it will be found.

Next we connect the router on the Vue instance. This can be done by adding a field named router. And since we use es6 it looks like we don’t, but adding a shorthand router on the Vue instance it will add a router: router on the instance. So we did add an option named router with the router. Handy.

Where to go

Ok, so we setup some routes, added them to vue. Where do we get to see them now?

We have a main page in the app named App.vue. Here we have some code. I have setup some code created using Writing an admin template in 14 lines of css…. using bootstrap. Just because we have that and it is awesome. In the main element we add a <router-view></router-view>. This is the component that will route the router. If you have connected the router to your vue it will magically work, if you set it up right. So we got this.

<template>
    <div class="admin">
        <div class="admin-sidebar bg-faded">
            <navbar></navbar>
        </div>
        <div class="admin-body" role="main">
            <div class="container-fluid">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
  import Navbar from './components/Navbar';

  export default {
    components: { Navbar },
    name: 'app',
  };
</script>

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';

    @media screen and (min-width: 992px) {
        .admin {
            height: 100vh;
            display: flex;

            .admin-sidebar {
                width: 300px;
                overflow: auto;
            }

            .admin-body {
                flex: 1;
                overflow: auto;
            }
        }

        .vh-100 {
            height: 100vh;
            overflow: auto;
        }
    }
</style>

So just to check, the template is the admin template in 14 lines of css. It does use a component navbar from the components folder, explained earlier, and we name the app component (this component). In the style we import bootstrap, as explained in part one, and we add 14 lines of css.

Test the route

So now if we run the server npm run dev we get redirected to a route named /#/dashboard. Like we setup. So if we try and manipulate the website and change the url we get redirected when we try and fake an url.

More routes

Ok, so if you thought that was a lot. Now we will create the cool bits. Now we just have one route on one page. We want to add more routes on lots and lots of pages in the app. I setup my app using modules. I named them modules but we can name them anything. I am planning on a people module and a messages module. So we will make pages for these. Lest draw out the directory structure for now.

src/assets/
src/component/
src/modules/messages/router/
src/modules/messages/store/
src/modules/messages/views/
src/modules/people/router/
src/modules/people/store/
src/modules/people/views/
src/router/
src/store/
src/views/

Small recap, component is for main components like the navbar. In the main app we add router, store and views. Router if for the router we just explained. Views has the Dashboard view and store is for a next talk on a store using vuex.

But! In-between we have some magical messages folder and people folder, here we add our modules for … messages and people. We add and build the routes per module so we can build the app bit by bit. Lets focus on routing for now.

Module routes

Let’s check the routes on the people module.

import People from '../views/People';
import Welcome from './../views/Welcome';
import Details from './../views/Details';
import Create from './../views/Create';

export default [
  {
    path: '/people',
    name: 'people',
    component: People,
    title: 'People',
    redirect: { name: 'people-welcome' },
    children: [
      {
        path: 'welcome',
        name: 'people-welcome',
        component: Welcome,
      },
      {
        path: 'create',
        name: 'people-create',
        component: Create,
      },
      {
        path: ':id',
        name: 'people-details',
        component: Details,
      },
    ],
  },
];

Per module i have a main route and child routes, that’s because i want to setup my vies like a “mail” app. Menu on the left, next the messages and on the third pane the details of that message. On the people page, menu on the left, people in the column next and details in the third column. I don’t know how and what i want to get on mobile, but we will get there.

So on the main route we stup a path to /people, and we added a redirect to people-welcome. This adds a cool trick to setup a main page using a child route in the page.

People.vue

<template>
    <div class="row">
        <div class="col-md-4 col-xl-3 bg-inverse vh-100">
           ...
        </div>
        <div class="col-md-8 col-xl-9 vh-100">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'people',
  };
</script>

This is the main view, note the magic router-view again. We setup the children routes in the router and with that it will create a new router in the main for the children. So we will be able to add a rout in a route. Routeception.

And now if we run the page we get a new route named /#/people which will result in a route to /#/people/welcome. Showing the Welcome view in the People view in the App view.

Just test it, it is awesome.

Add the routes to the router

Ok, so we now have routes, modules, things, whoah a lot. It’s probable too much for a quick router starter. But westill have one more thing to add. We want the people routes in the main router. Let’s go back to the main router.

import Vue from 'vue';
import Router from 'vue-router';
import Dashboard from '@/views/Dashboard';
import peopleRoutes from '@/modules/people/router';

Vue.use(Router);

const baseRoutes = [
   ...
];

const routes = baseRoutes.concat(peopleRoutes);
export default new Router({
  routes,
});

Ok, so i renamed the main routes to baseBoutes. We import the router from the people module, remember the auto import of index.js. Next we want to merge all routes so we create a routes variable and concatenate all other routes on these. Result, a router with all our routes and we can play with modules and views as we like, cool.

Way way way too long

We want to create a simple and quick tutorial, if i view this page we got way too long. I hope you got to here, but if you did you are reading this. I you did, cool.

I did skip some and did not show all the views, we have a store connected to them and have to tell lots more for the complete info. It will be more info we will get at in the future. This was just a simple story about a router.

If text is too much you can just check out my example on https://github.com/disjfa/kazoo and as example on https://disjfa.github.io/kazoo.

Did use a main Photo by Tyler Feague on Unsplash.