Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Single Page Applications Chapter 15

next: This is a function we can use when we are ready to go on with the
switching of the route. Calling this function with false will prevent the route
from being changed, and it is useful in case of errors.

When the preceding functions are called, we made a call with Axios to a web service that


provided a string for a name and a string for a phone number.


When we are inside this hook, it's important to remember that we don't have access to this.


It's because this hook runs before the component is actually instantiated, so there is no this


to refer to.


When the server responds, we are inside the then function and want to assign the name


and phone returned from the server but, as said, we don't have access to this. The next


function receives a reference to our component as an argument. We use this to set the
variables to the received value:


}).then(response => {
next(vm => {
vm.name = response.data.name
vm.phone = response.data.phone
})
})

Using named dynamic routes


Registering all the routes by hand can be time consuming and, when the routes are not


known in advance, it is impossible. vue-router lets you register routes with an argument so


that you can have links for all the objects in a database and cover other use-cases where the
user chooses a route, following some pattern that will result in too many routes to be


registered by hand.


Getting ready


Except for the basics on vue-router (refer to the Creating an SPA with vue-router recipe), you
won't need any additional information to complete this recipe.

Free download pdf