How does a frontend router work? Deep dive with Vue Router

When we develop single-page applications, we have to use a router. Every single framework has its own router, React even has multiple ones you can choose from. And even though each framework is different and every router takes a different approach, they all share the same principles.

What is behind a simple and easy-to-use API? Is it really that difficult to create your own SPA router? What are the different approaches and their advantages, caveats?

Let's answer all these questions by comparing different routers and taking a deeper dive into Vue Router.