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 For the other component, the home page, we will just write a small component as a placeholde ...

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 rou ...

Single Page Applications Chapter 15 How to do it... We will open an online restaurant with ten different dishes. We will create ...

Single Page Applications Chapter 15 In the preceding component, we refer to the global router object with $route, and we take th ...

Single Page Applications Chapter 15 How it works... There are two main parts of the code that contribute to creating the routes ...

Single Page Applications Chapter 15 Having more than one router-view in your page Having multiple enables you to have pages tha ...

Single Page Applications Chapter 15 After that, register the routes: const router = new VueRouter({ routes: [ { path: '/', compo ...

Single Page Applications Chapter 15 This contains a link to see more about the computer on sale; the next component is bound to ...

Single Page Applications Chapter 15 If you don't specify a name, the route will be referred to as default: routes: [ { path: '/' ...

Single Page Applications Chapter 15 The HTML layout of our website is as follows: <div id="app"> <h1>Kindoms Encyclo ...

Single Page Applications Chapter 15 <router-link to="soldiers">Soldiers</router-link> <router-view></router ...

Single Page Applications Chapter 15 Launching the application will enable you to have a visual representation of the gold and th ...

Single Page Applications Chapter 15 For example, consider that we change our code to the following: const router = new VueRouter ...

Single Page Applications Chapter 15 How to do it... Let's imagine that we have a fashion website and Lisa, the employee responsi ...

Single Page Applications Chapter 15 alias: '/green-dress-01' }, { path: '/red-purse-A2', component: PradaA2, alias: '/green-purs ...

Single Page Applications Chapter 15 How it works... Even if we changed all of our links, we cannot control how other entities ar ...

Single Page Applications Chapter 15 Note how we wrapped the main router display port with a transition tag. The mode out-in is s ...

Single Page Applications Chapter 15 How it works... Wrapping the whole inside a transition tag will perform the same transition ...

Single Page Applications Chapter 15 How to do it... As said, we will edit the resulting code from the Fetching data before switc ...

Single Page Applications Chapter 15 Then, assign our Vue root instance to it: vm = new Vue({ router, el: '#app', data: { showErr ...