Vue.js Routing Basics using Vue Router

Install the vue-router:

npm install vue-router

Create routes.js in src directory:

import Blog from './Blog.vue';
import Home from './Home.vue';

export const routes = [
  { path: '', component: Home },
  { path: '/articles', component: Blog }
];

We are mapping the root of the domain to the home page and blog page to /articles path. This defines the URL and the component mapping. Import vue-router and register it in main.js:

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Register the router in main.js. The complete file looks like this:

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import Blog from './Blog.vue'
import { routes } from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

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

The index.html has the div with id app. No change to this file from previous article.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Routing</title>
  </head>
  <body>
    <div id="app"> </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

In App.vue, we have the router-view tag to provide the routing functionality:

<template>
  <div id='container'>
    <h1>Routing</h1>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style>
</style>

The Blog.vue is same as shown in a previous article:

<template>
  <div id='container'>
    <h1>My Blog</h1> 

    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="article in articles">
          <td>{{article.id}}</td>
          <td>{{article.title}}</td>
        </tr>
      </tbody>
    </table>  
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'app',
    data: function () {
      return {
        articles: []
      }
    },
    methods: {
      fetchArticles: function () {
        axios.get('http://localhost:3000/articles').then((response) => {
          this.articles = response.data
        }, (error) => {
          console.log(error)
        })
      }
    },
    mounted: function () {
      this.fetchArticles()
    }
  }
</script>

<style>
  body {
    background-color: #444444;
    font-family: Verdana, Helvetica, Arial;
    font-size: 14px;
  }
  a img {
    border: none;
  }
  a {
    color: #0000FF;
  }
  .clear {
    clear: both;
    height: 0;
    overflow: hidden;
  }
  #container {
    width: 75%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px 40px;
    border: solid 1px black;
    margin-top: 20px;
    position: relative;
  }
  #flash_notice, #flash_error, #flash_alert {
    padding: 5px 8px;
    margin: 10px 0;
    margin-right: 150px;
  }
  #flash_notice {
    background-color: #CFC;
    border: solid 1px #6C6;
  }
  #flash_error, #flash_alert {
    background-color: #FCC;
    border: solid 1px #C66;
  }
  .field_with_errors {
    display: inline;
  }
  .error_messages {
    width: 400px;
    border: 2px solid #CF0000;
    padding: 0px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    font-size: 12px;
  }
  .error_messages h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    margin: 0;
    background-color: #c00;
    color: #fff;
  }
  .error_messages p {
    margin: 8px 10px;
  }
  form .field, form .actions {
    margin: 12px 0;
  }
  h4 {
    margin-bottom: 5px;
  }
  table {
      border-collapse: collapse;
      width: 100%;
  }
  th, td {
      text-align: left;
      padding: 8px;
  }
  tr:nth-child(even){background-color: #f2f2f2}
  th {
      background-color: #4CAF50;
      color: white;
  }
</style>

Create Home.vue for the home page in src folder:

<template>
  <div>
    <p> This is my home page</p>
  </div>
</template>

You can now browse to http://localhost:8080 and http://localhost:8080/articles. You will be able to browse to home page and the blog.

Navigating between Pages

In App.vue import the Navigation component that consists of the links to home and blog. It looks like this:

<template>
  <div id="container">
    <h1>Routing Demo</h1> 
    <hr>
    <app-navigation></app-navigation>
    <router-view></router-view>
  </div>
</template>

<script>
  import Navigation from './Navigation.vue';
  export default {
    components: {
      appNavigation: Navigation
    }
  }
</script>

<style>
</style>

The navigation tag:

<app-navigation></app-navigation>

will display the navigation links. Add the navigation style to highlight the active link in Navigation component:

  body {
    margin: 0;
    padding: 0;
    background: #f7f8fa;
  }

  .nav ul {
    list-style: none;
    background-color: #282d31;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .nav li {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #888;
  }

  .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
  }

  .nav a:hover {
    background-color: #019fc2;
  }

  .nav a.active {
    background-color: #f7f8fa;
    color: #019fc2;
    cursor: default;
  }

  @media screen and (min-width: 700px) {
    .nav li {
      width: 120px;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
    }

    .nav li {
      display: inline-block;
      margin-right: -4px;
    }
  }

The Navigation.vue template section looks like this:

<template>
  <div class='nav'>
    <ul>
      <li>
        <router-link to='/'>Home</router-link>
        <router-link to='/articles'>Blog</router-link>
      </li>
    </ul>    
  </div>
</template>

The router-link tag is provided by the vue-router. We are mapping the root of the webapp to the home page and the articles listing page to the blog page. We will now be able to click the home and blog links to navigate between those pages. You can download the source code for this article from blov.

References


Related Articles


Create your own user feedback survey