Single Page Applications Chapter 15<li><router-link to="/" exact>Home</router-link></li>
<li><router-link to="/aboutme">About Me</router-link></li>
</ul>
<router-view></router-view>
</div>In the JavaScript, you can start building your AboutMe component:
const AboutMe = {
template: `<div>Name:{{name}}<br>Phone:{{phone}}</div>`
}It will display only a name and a telephone number. Let's declare the two variables in the
data option of the component, as follows:
data () {
return {
name: undefined,
phone: undefined
}
}The vue-router, before actually loading the component onto the scene, will look for an
option in our object, called beforeRouteEnter; we will use this to load the name and
phone from a server. The server we are using will provide fake data just for the purpose of
displaying something, which is as follows:
beforeRouteEnter (to, from, next) {
axios.post('https://schematic-ipsum.herokuapp.com/', {
"type": "object",
"properties": {
"name": {
"type": "string",
"ipsum": "name"
},
"phone": {
type": "string",
"format": "phone"
}
}
}).then(response => {
next(vm => {
vm.name = response.data.name
vm.phone = response.data.phone
})
})
}