Vue 3 Router

Focused View

Nertil Poci

2:31:54

72 View

1. Course Overview

1. Course Overview.mp4

01:35

2. Setting up Navigation in Vue.js

1. Overview.mp4

01:20

2. Version Check.mp4

01:04

3. Setting up the Project.mp4

04:21

4. Installing the Vue Router.mp4

04:42

5. Setting up Routes and Router Views.mp4

06:28

6. Redirecting to Default Route.mp4

04:43

7. Handling 404 Cases.mp4

04:40

8. Configuring Router History Modes.mp4

04:01

9. Summary.mp4

01:26

3. Building Dynamic Routes with Route Parameters

1. Overview.mp4

01:04

2. Creating Routes with Parameters.mp4

03:42

3. Reading Route Parameters from Components.mp4

03:28

4. Converting Route Params to Component Props.mp4

06:20

5. Adding Custom Regex to Route Parameters.mp4

05:43

6. Customizing Router Links.mp4

04:33

7. Summary.mp4

01:19

4. Adding Navigation Checks Using Route Guards

1. Overview.mp4

01:50

2. Adding Authentication Guards to Routes.mp4

05:49

3. Adding Component Deactivation Guards.mp4

05:13

4. Working with Before Resolve Hooks.mp4

03:35

5. Working with Per-route and After Hooks.mp4

04:46

6. Summary.mp4

01:51

5. Programmatically Navigating and Interacting with the Vue Router

1. Overview.mp4

01:28

2. Creating a Go Back Button.mp4

04:14

3. Navigating to Routes Programmatically.mp4

03:06

4. Replacing Current History.mp4

05:14

5. Summary.mp4

01:16

6. Designing Complex Layouts with Nested and Named Views

1. Overview.mp4

01:13

2. Creating Nested Routes and Views.mp4

03:20

3. Redirecting to Default Child Route.mp4

01:59

4. Creating Layouts Using Named Views.mp4

03:19

5. Handling Empty Named Router Views.mp4

04:20

6. Summary.mp4

01:16

7. Optimizing App Load Time through Lazy Loading

1. Overview.mp4

01:27

2. Importing Components Dynamically for Lazy Loading.mp4

03:12

3. Grouping Lazy Loaded Routes Together.mp4

03:01

4. Downloading Lazy Loaded Components in the Background.mp4

03:07

5. Summary.mp4

01:34

8. Enhancing User Experience with Transitions and Scrolling Behavior

1. Overview.mp4

01:17

2. Highlighting Active Links.mp4

06:18

3. Adding Navigation Transitions.mp4

08:47

4. Implementing Scrolling Behavior.mp4

06:38

5. Summary.mp4

02:15

Description

This course will teach you the intricacies of adding navigation to your Vue.js web applications using the Vue Router, a powerful tool for creating dynamic and responsive navigation experiences.

What You'll Learn?

Modern single-page applications can quickly become complex, with hundreds or even thousands of components that need to fit together seamlessly. Managing these interactions can be a challenge, but Vue Router can help. In this course, Vue 3 Router, you’ll learn how to configure routing in Vue.js applications using the Vue Router. First, you'll see how to install and configure primary routes, create dynamic routes with parameters, and pass route parameters as props to components. Then, you'll discover how to add route guards to protect your application, and interact with the Vue Router API programmatically. After that, you'll explore creating advanced layouts using nested and named views, eliminating dependencies between components, and managing the layout of your application through the router. Finally, you'll learn how to improve application load time by lazy loading route components, add transitions between menus, and remember users' last scrolling position for an improved user experience. By the end of this course, you'll have a deep understanding of Vue Router and be able to quickly implement different routing scenarios in your Vue.js applications to create a good user and developer experience.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Vue JS

Nertil Poci

Instructor's Courses

Nertil is a freelance software architect working with different companies around the globe to help them bring their products to market. He has a master’s degree in computer science with a focus in software architecture. One of his main passions is discovering new tools and libraries that exists out there. Knowing what tools are available building apps much easier and gives you the confidence you need when challenging task comes along. Nertil enjoys building practical open source apps in his spare time, it’s how he stays up to date with the latest technologies and contributes back to the open source community.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.