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

router,

el: '#app'

})

</script>

</body>

</html>

As HTML layout, put this in the body:

<div id="app">

<h1>News Portal</h1>

<ul>

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

<li><router-link to="/sports">Sports</router-link></li>

<li><router-link to="/fashion">Fashion</router-link></li>

</ul>

<router-view></router-view>

</div>

We have a heading with three links and a router-view entry point. We will create two long
pages for the sports and fashion pages:

const Sports = { template: `

<div>

<p v-for="i in 30">

Sample text about sports {{i}}.

</p>

<router-link to="/fashion">Go to Fashion</router-link>

<p v-for="i in 30">

Sample text about sports {{i + 30}}.

</p>

</div>

` }

const Fashion = { template: `

<div>

<p v-for="i in 30">

Sample text about fashion {{i}}.

</p>

<router-link to="/sports">Go to Sports</router-link>

<p v-for="i in 30">

Sample text about fashion {{i + 30}}.

</p>

</div>

` }