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

We only need a stub for the home page component:

const Home = { template: '<div>Welcome to BBCCN</div>' }

Write a reasonable router for this news website:

Vue.use(VueRouter)

const router = new VueRouter({

routes: [

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

{ path: '/sports', component: Sports },

{ path: '/fashion', component: Fashion }

]

})

If you go with your browser now to the address specified earlier, you should see the site
live.

Go to the sports page, scroll down until you see the link, and click on it.

Note how the page you are visiting is not displayed from the beginning. This will not

happen with a traditional website and is not desirable.

Click on the back button and note how we are where we last left the page; we want to
retain this behavior.

Lastly, note how the URL of the page does not look natural but has the hash symbol inside;
we would like the URL to look better: