Advanced Routing in Vue.js with Vue-Router Course

About This Course

Vue.js, while relatively new to the scene, is growing in popularity quite quickly. It is relatively easy to get started with, but for anything non-trivial, it quickly becomes apparent that routing can help Vue web applications grow more easily, and also make user navigation much simpler.

There are all kinds of routing libraries out there, but the simplest choice for Vue applications is Vue-Router. Most people choose Vue-Router over the competition because it is created and maintained by the same team who built Vue.js and it's designed to integrate very nicely into Vue apps.

This course, Advanced Routing in Vue.js with Vue-Router, teaches how to integrate Vue-Router into your Vue.js apps and leverage its full capacity.


Course Category


This is a one-day hands-on course.

Skill Level

Get Training Quote

What Happy Developers Say

The instructor did a good job of adjusting content to meet different skill levels.
Developer, Intuit
The instructor was very knowledgeable, making it easy to ask questions and provided good conversation about the topic at hand.
dell  logoWeb Developer, DELL
The instructor demonstrated strong broad knowledge as well as technical in-depth when appropriate
Engineer, Starbucks
I liked that we could determine what to learn, no time was wasted.
Javascript Developer, RetailMeNot
I had trouble understanding a certain concept, and told the instructor that I just didn't get it. While the class was busy with an exercise, he sat down with me, gave me material to read, and made sure I understood it before I moved on. I really appreciated that.
JavaScript Developer, PayPal
The instructor has a great attitude and pacing. Amazing how much he knows about JS!
Junior JavaScript Developer, Macy's


  • Install Vue-Router into their project and integrate it into your Vue.js app
  • Create routes and show different components depending on the route
  • Pass route parameters to your views
  • Use nested routes, named routes, and named route zones
  • Create redirects and aliases
  • React to route changes within components
  • Set up guards to prevent navigation to routes they should not have access to
  • Transition between components when the route changes
  • Fetch relevant data when routing


Developers who have at least a basic understanding of Vue.js looking to add routing to their applications.

Course Outline

  • Introduction
    • What is Vue-Router?
    • Core concepts of Vue-Router
  • Getting Started
    • Installing the Vue-Router library
    • Creating your first route
    • Adding a router-view component
  • Route Basics
    • Using dynamic route parameters
    • Passing routing parameters as component props
    • Nesting routes
    • Navigating programmatically
    • Using router-link components
    • Naming routes
  • Intermediate Routing Techniques
    • Controlling multiple components with named router views
    • Using redirects
    • Using route aliases
    • Changing routing modes (hashes vs history API)
  • Advanced Routing
    • Using navigation guards to restrict access to routes
    • Using route meta data
    • Smoothing transitions between components on route change
    • Performing asynchronous operations between routes
    • Reverting scroll position during when navigating through history
    • Lazy loading route components

Instructors Who Teach This Course



Elias Carlston has 20 years’ experience as a software engineer, from lean startups to large enterprises. Having great mentors early on showed Elias the value of sharing knowledge, and he enthusiast... read more



Craig recently released the book, The JavaScript Framework Guide: AngularJS, Backbone, and Ember. Craig has been a guest on the Hanselminutes and JavaScript Jabber podcasts. He’s an avid blogger, a... read more



Eve has been focused on web and curriculum development since college, where she studied user interface design and usability. Since then, she has consulted as a project manager and coder to deliver ... read more



With backgrounds in technology, business and education, Jason brings a broad array of experience to BDA. He‰'s been programming since he was a kid and currently runs a business, 303 Velocity, that ... read more

Who Takes This Training?