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.

Request More Info About This Course
vue

Course Category

Duration

This is a one-day hands-on course.

Skill Level

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

Purpose

  • 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

Audience

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
Request More Info About This Course

Instructors Who Teach This Course

Elias

Elias

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 enthusiastically embraces the opportunity to give back to the community through teaching. Beginning his career as a data analyst for a large non-profit clinic, he soon became a full stack developer. First, at ... read more

Craig

Craig

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, and several of his articles have been published in Peter Cooper’s poplular “JavaScript Weekly” newsletter. He also has his own podcast, “The Front-End Developer’s Cast”.

Craig has been a developer f... read more

Eve

Eve

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 interactive web applications, from e-Learning portals to mobile apps.

Well-versed in HTML5, CSS3 and other front-end technologies, Eve has lent her interface and training skills to the redesign of ... read more

Jason

Jason

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 builds iOS and Android apps for its clients. They also do consulting work to help publishers get more downloads and sales for their apps. He has taught mobile classes for Yahoo! and Intel employees an... read more

Who Takes This Training?

Learn More About This Course