We are preparing a modern website for a restaurant and we will use the SPA pattern.
The website will consist of three pages: a home page, the restaurant menu, and the bar menu.
The whole HTML code will be like this:
<div id="app"> <h1>Choppy's Restaurant</h1> <ul> <li>Home</li> <li>Menu</li> <li>Bar</li> </ul> <router-view></router-view></div>
The <router-view> 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 ...
