Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Now, visit http://localhost:8080/#/contact and you should be able to view both

pages.

To make it usable and easily readable for our app, let's rename the HelloWorld component

to the Home component. Rename the file HelloWorld.vue to Home.vue

Also, change the binding route from HelloWorld to Home in App.vue:

<template>

<v-app id="inspire">

<v-navigation-drawer

fixed

v-model="drawer"

app

>

<v-list dense>

<router-link v-bind:to="{ name: 'Home' }" class="side_bar_link">

<v-list-tile @click="">

<v-list-tile-action>

<v-icon>home</v-icon>

In the routes/index.js as well, change the component name and the route

to Home from HelloWorld:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/components/Home';

import Contact from '@/components/Contact';

Vue.use(Router);

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home,

},

{

path: '/contact',

name: 'Contact',

component: Contact,

},

],

});