In this lesson, Hassan teaches about routing and the Vue Router. Students will specifically learn about:
- Routing: refers to splitting an application's UI based on rules derived from the browser URL
- Vue Router: Vue's official client-side routing library
- Routes: array that maps components to respective URL pathnames
- Router-view: component responsible in rendering another specified component based on the app's location.
- Router-link: component that allows the user to change the location of the browser without making web request.
- Dynamic Route Matching: matching routes with the same pattern to a single component.
- Nested Routes: compose components multiple levels deep that corresponds to segments of a URL path.
- Navigation Guards: guard navigations by either redirecting or canceling.
Exercise: Cities Router
Okay, it's your turn! Practice using the Vue Router to navigate bewteen components! Hassan discusses this exercise around 37:44.
Goals
Complete the below separately:
- Create a router instance (e.g. router.js) that exports a router instance and contains a routes array. Create simple routes for each city as well as homepage and not-found routes.
- Create a router instance (e.g. router.js) that exports a router instance and contains a routes array. In this case, create a single dynamic for the different cities. Also create separate homepage and not-found routes.
Starter code: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/05-routing/exercise/starting-point