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

<li>Bar</li>

</ul>

<router-view></router-view>

</div>

The component is the entry point for vue-router. It's where the

components are displayed as pages.

The list elements will become the link. For now, they are only list elements; to turn them

into links, we can use two different syntaxes. Wrap the first link as in the following line:

<li><router-link to="/">Home</router-link></li>

Another example is as follows:

<li><router-link to="/menu">Menu</router-link></li>

Another syntax we can use is the following (for the Bar link):

<li>

<router-link

tag="li" to="/bar"

:event="['mousedown', 'touchstart']"

>

<a>Bar</a>

</router-link>

</li>

This, more verbose but more explicit, syntax can be used to bind a custom event to a
particular routing.

To instruct Vue that we want to use the vue-router plugin, write the following in the
JavaScript:

Vue.use(VueRouter)

The part of three pages we listed at the beginning will be played by these three dummy
components (add them to the JavaScript):

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

const Menu = { template: '<div>Today we have cookies</div>' }

const Bar = { template: '<div>We serve cocktails</div>' }