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

this.$router.go(-1);

// Navigate forward three records

this.$router.go(3);

// Navigate backward three records

this.$router.go(-3);

Lazy loading routes

We can also lazy load our routes to take advantage of code splitting with webpack. This

allows us to have greater performance than when eagerly loading our routes. To do this, we
can create a small playground project. Run the following in your Terminal:

# Create a new Vue project

$ vue init webpack-simple vue-lazy-loading

# Navigate to directory

$ cd vue-lazy-loading

# Install dependencies

$ npm install

# Install Vue Router

$ npm install vue-router

# Run application

$ npm run dev

Let's start off by creating two components, named Hello.vue and World.vue, inside

src/components:

// Hello.vue

<template>

<div>

<h1>Hello</h1>

<router-link to="/world">Next</router-link>

</div>

</template>

<script>

export default {};

</script>