Vue
One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]

Routing & Vue Router

PRO

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

 

I finished! On to the next chapter