Advanced Routing in Vue.js with Vue-Router Course

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

Download

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

Learn About Virtual Training

Request Information

Get your team upskilled or reskilled today. Chat with one of our experts to create a custom training proposal. Fully customized at no additional cost.

If you are not completely satisfied with your training class, we'll give you your money back.

about our training

Real-World Content

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

Industry experts with 15+ years of industry experience that bring their battle scars into the classroom.
Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
Fully Customized

One-size-fits-all doesn't apply to training teams. That's where we come in!

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