Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Advanced Routing in Vue.js with Vue-Router

Course Summary

The Advanced Routing in Vue.js with Vue-Router course is designed to demonstrate how to create robust routing in their Vue apps.

The course starts with a review of Vue and installation of Vue-Router. It then dives into creating routes and showing different components depending on the route. Finally, it wraps up with using nested routes, named routes, and named route zones.

Purpose
 Learn how to setup Vue routing in web applications using the Vue-Router.
Audience
 Vue.js developers looking to make their applications more modular and maintainable.
Role
Web Developer
Skill Level
Intermediate
Style
Fast Track - Targeted Topic - Workshops
Duration
1 Day
Related Technologies
JavaScript | Web Development | Vue.js

 

Productivity Objectives
  • Install Vue-Router into your 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
  • Utilize nested routes, named routes, and named route zones
  • Create redirects and aliases

What You'll Learn:

In the Advanced Routing in Vue.js with Vue-Router training course, you'll learn:
  • 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
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.