Poi Vue Mini Tut Part 5 & 6

Part 5. Adding 2 more pages

So now we will just add 2 more top level nav pages/links to fill it out a bit.

3 procedures involved, first one is in App.vue, where we have to add the extra router links.

Open up App.vue and add the lines:

Blog
Contact

Before the first two router links.

Then create 2 more pages in “views” folder called “Blog.vue” and “Contact.vue”

or just copy/paste the About.vue file and alter the template, so it is like below


And:


Finally, in router.js add the new routes as before:

{
path: ‘/blog’,
name: ‘blog’,
component: Blog
},
{
path: ‘/contact’,
name: ‘contact’,
component: Contact
}

Dont forget the comma ending the previous entry.

Now we have four page views and nav links/routes to them.

Run:

$ npm start

To have a look.

As you can see there are no styles yet and, but plenty of room to add more top level pages and links if necessary.

Files on Github

$ git clone https://github.com:minimallinux/poiwpvuestarter.git
$ git branch -a
$ git checkout addpages

Part 6. Add basic styles.

Now well just add some basic styles to the nav to make it look a bit nicer.

In App.vue add the following below the template tags., these are global as set.

It just gives it a nicer appearance. Can be altered later.

Files on Github

$ git clone https://github.com:minimallinux/poiwpvuestarter.git
$ git branch -a
$ git checkout addstyles

Author: Paul Anthony McGowan

Web Technology & Linux Enthusiast, Javascript Afficiado, General Observer Of World Corruption. Builder Of A Variety Of Web Properties And Campaigner Against Serious Government Criminality.

Leave a Reply

Your email address will not be published. Required fields are marked *