Understanding client side routing, with Vue.js
Submitted by Hassan Djirdeh (@djirdehh) on Tuesday, 20 March 2018
Technical level: Beginner
What does it actually take to construct a client side router? I’ll show you how to build a basic fully functional client-side router in Vue in under 50 lines of code.
By doing so, we’ll gather an understanding of the relevance/importance of client-side routing and where potential shortcomings can exist.
In web development, routing often refers to splitting an application’s UI based on rules derived from the browser URL. Numerous tools/libraries exist that allow us to enable routing both on the client and server side of applications.
But what does it actually take to construct a client side router? First, I’ll use the most basic tools that the Vue framework already provides to build a fully functional custom client side router. We’ll then switch over to using the official vue-router library to understand all the benefits that it adds such as nested routes, navigation guards, transition effects, etc.
This talk will be a more defined, extrapolated version of this CSS-Tricks blog post I published - https://css-tricks.com/build-a-custom-vue-router/.
An engineering graduate and a self-taught web developer, Hassan is currently a Front End Engineer for the App Platform team within Shopify. Prior to being at Shopify, Hassan wore different hats as a Technology Consultant within Deloitte Digital, helping different clients build and scale their front-end applications. Hassan is also the lead author of Fullstack Vue, an in-depth book into building real world Vue.js applications.