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.
Developers who have at least a basic understanding of Vue.js looking to add routing to their applications.
Upon completion of this course, developers will understand or know how to:
- 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
This is a one-day hands-on course.
- What is Vue-Router?
- Core concepts of Vue-Router
- Getting Started
- Installing the Vue-Router library
- Creating your first route
- Adding a
- Route Basics
- Using dynamic route parameters
- Passing routing parameters as component props
- Nesting routes
- Navigating programmatically
- 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 Information About This Course