Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

</v-layout>

</template>

Now, if you visit http://localhost:8080/#/, you should be able to view the home

page.

Redesigning the contact page

Let's go ahead with adding a new contact page. The first thing to do is add a route to our

routes file. In router/index.js, add the following code:

import Vue from 'vue';

import Router from 'vue-router';

import HelloWorld from '@/components/HelloWorld';

import Contact from '@/components/Contact';

Vue.use(Router);

export default new Router({

routes: [

{

path: '/',

name: 'HelloWorld',

component: HelloWorld,

},

{

path: '/contact',

name: 'Contact',

component: Contact,

},

],

});

What we did here is add a path for the contact page, the name of the component, which we
did in our export module in the .vue file, and the actual name of the component. Now we

need to build a view file. So let's create a Contact.vue file in src/components/ and add

the following content to it:

<template>

<v-layout>

this is contact

</v-layout>

</template>