Anatomy Of A Pyschopath

Poi Vue Mini Tut Part 3 & 4?

Part 3. Creating components/views directories and extending the app with a home page link.

Poi uses the html-webpack-plugin to supply the index.html file which is usually added with the vue-cli, so we dont need to add that. The title and description are changeable but we will come back to that later, probably dont want app to be called “Poi App”!

So now we add a home page and router to route the page.

For the router and home page view

Create a folder called “views” in your project root for the views files.

First the router:

Open up the blank router.js file and enter in to it the following:

import Vue from ‘vue’
import Router from ‘vue-router’
import Home from ‘./views/Home.vue’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home
}
]
})

So we just imported the Home.vue view and set the route path to it.
Now in the “views” folder lets create a file called “Home.vue” and enter the following:


We are going to transfer the original message yet again into the home page view now, and the original App.vue file will just contain the nav links.

So having created the new view and router files, we now alter the App.vue template to remove the now unneeded code.

All that will be imported from App.vue now is the routed nav links, change it as below:

Change/delete old stuff so it looks like this:

The “about” link wont work yet, well add that page shortly.

Finally, adjust index.js to ad the router:

Open up index.js and above the render line in the new Vue object add the line

“router,” so it looks like below

const vm = new Vue({
el: ‘#app’,
router,
render: h => h(App)
});

Run npm start, and you should see the new view which comes from /views/Home.vue, the nav links now appear above the message, which is the same as before, its just now coming from the new file.

Files on Github

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

Part 4. Adding the about page.

Now we add the about page using a similar procedure, but there’s less to do now.
The App.vue is already done, it just holds the nav links and router has been added to th index.js file, so its just 2 procedures.

Open up the router.js file and add, so it looks like below:

import Vue from ‘vue’
import Router from ‘vue-router’
import Home from ‘./views/Home.vue’
import About from ‘./views/About.vue’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home
},
{
path: ‘/about’,
name: ‘about’,
component: About
}
]
})

In the “views” folder create a file called “About.vue” and add the following:


Run

$ npm start and you should get a new working link to the about page.

Files on Github

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

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. Founder of Vorteasy

Leave a Reply

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