Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

For the other component, the home page, we will just write a small component as a

placeholder:

const Home = { template: '<div>This is my home page</div>' }

Next thing is that you have to register the router and its paths:

Vue.use(VueRouter)

const router = new VueRouter({

routes: [

{ path: '/', component: Home },

{ path: '/aboutme', component: AboutMe },

]

})

Also, of course, you have to register a Vue root instance, which is as follows:

new Vue({

router,

el: '#app'

})

When you launch your application and click on the About Me link, you should see
something similar to this:

You will note that there is no page reload when you click on the link, but it still takes quite

some time to display the bio. This is because it is fetching the data from the Internet.

How it works...

The beforeRouteEnter hook takes three parameters:

to: This is a Route object that represents the route requested by the user.

from: This is also a Route object that represents the current route. This is the

route the user will be kept at in case of errors.