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

Vue Router Patterns Chapter 20 Creating routes We can then define two small components inside our main.js file that simply have ...

Vue Router Patterns Chapter 20 If we then navigate to /#/hello/ or /#/world, the appropriate component is displayed: Dynamic rou ...

Vue Router Patterns Chapter 20 Route props Let's change our /hello/name route to pass the name parameter as a component prop, wh ...

Vue Router Patterns Chapter 20 Component Navigation Guards How do we fix the lifecycle hook problem? In this instance, we can us ...

Vue Router Patterns Chapter 20 beforeRouteEnter We can also take advantage of beforeRouteEnter to perform actions prior to enter ...

Vue Router Patterns Chapter 20 Here's an example that simply logs out the route the user is going to and coming from. Each one o ...

Vue Router Patterns Chapter 20 Resolution stack Now that we've familiarized ourselves with the various different route lifecycle ...

Vue Router Patterns Chapter 20 Trigger global beforeResolve hooks: Providing in-component guards and async route components hav ...

Vue Router Patterns Chapter 20 We can then add a method that pushes a new route onto the route stack: <script> export defa ...

Vue Router Patterns Chapter 20 this.$router.go(-1); // Navigate forward three records this.$router.go(3); // Navigate backward t ...

Vue Router Patterns Chapter 20 Now we have created our Hello.vue component, let's create the second World.vue like so: // World. ...

Vue Router Patterns Chapter 20 const router = new VueRouter({ routes, }); new Vue({ el: '#app', router, render: h => h(App), ...

Vue Router Patterns Chapter 20 Each route is added to its own bundle file and subsequently gives us an improved performance as t ...

Vue Router Patterns Chapter 20 $ cd vue-spa # Install dependencies $ npm install # Install Vue Router and Axios $ npm install vu ...

Vue Router Patterns Chapter 20 To then initialize the router, we can then create a new VueRouter and pass along the routes, as f ...

Vue Router Patterns Chapter 20 { id: 1, name: 'Leanne Graham', } ], }; }, }; </script> Feel free to add your own test data ...

Vue Router Patterns Chapter 20 export const API = axios.create({ baseURL: `https://jsonplaceholder.typicode.com/` }) We can then ...

Vue Router Patterns Chapter 20 Creating a detail page In order to create a detail page, we can create UserDetail.vue and follow ...

Vue Router Patterns Chapter 20 .catch(err => console.error(err)) ) }, }; </script> <style> .container { line-heig ...

Vue Router Patterns Chapter 20 If we then take a look in our browser we can see that there is only one user listed with the info ...