8

Introducing Vue-Router and

Loading URL-Based

Components

In the next few chapters, we are going to be creating a shop interface. This shop is going to
combine everything we have learned so far while introducing some more techniques,

plugins, and functionality. We are going to look at retrieving a list of products from a CSV
file, displaying them and their variations, and filtering the products by manufacturer or

tags. We will also look at creating a product detail view and allowing the user to add and

remove products and product variations, such as size or color, to their online shopping
basket.

All of this will be achieved using Vue, Vuex, and a new Vue plugin, Vue-router. Vue-router
is used for building Single Page Applications (SPAs) and allows you to map components

to URLs, or in VueRouter terms, routes, and paths. This is an extremely powerful plugin

and handles a lot of the intricate details required for the processing of URLs.

This chapter is going to cover:

Initializing Vue-router and its options

Creating links with Vue-router

Making dynamic routes to update the View based on URL

Using props with URLs

Nesting and naming routes

How to navigate programmatically with Vue-router