Why Pages and file-based routing in Vue? - Purpose & Use Cases

The Big Idea

Discover how your page files can magically become website routes without extra work!

The Scenario

Imagine building a website where you have to manually write code to connect every page link to its content file. Every time you add a new page, you must update a big list of routes by hand.

The Problem

This manual linking is slow and easy to mess up. Forgetting to update the route list breaks navigation. It's hard to keep track of many pages, and adding or removing pages means extra work everywhere.

The Solution

Pages and file-based routing automatically create routes from your page files. Just add a new file, and the system knows the URL path. No manual route lists needed, making navigation simple and error-free.

Before vs After

✗ Before

const routes = [ { path: '/home', component: HomePage }, { path: '/about', component: AboutPage } ];

✓ After

// Just add files like 'home.vue' and 'about.vue' in the pages folder, routes are created automatically.

What It Enables

This lets you focus on building pages without worrying about routing details, speeding up development and reducing mistakes.

Real Life Example

Think of a blog where each post is a file. With file-based routing, adding a new post file instantly creates a new page URL without extra setup.

Key Takeaways

Manual route setup is slow and error-prone.

File-based routing auto-generates routes from page files.

This makes adding, removing, or changing pages easy and reliable.