Pages and file-based routing in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is file-based routing in Vue?

File-based routing means the app creates routes automatically based on the files in the pages folder. Each file becomes a page with its own URL.

beginner

How does Vue determine the URL path from a file name in file-based routing?

Vue uses the file name and folder structure to build the URL path. For example, a file named about.vue becomes /about in the URL.

intermediate

How do you create a nested route using file-based routing in Vue?

You create a folder inside the pages folder and put Vue files inside it. The folder name becomes part of the URL path, making nested routes.

intermediate

What special file name is used to create a dynamic route in Vue file-based routing?

You use square brackets around the file name, like [id].vue. This means the route can accept different values for id.

beginner

Why is file-based routing helpful for beginners?

It saves time because you don't write route code manually. You just add files and Vue handles the URLs. It also keeps the project organized.

In Vue file-based routing, what URL does the file pages/contact.vue map to?

A /contact

B /pages/contact

C /contact.vue

D /

The file name contact.vue directly maps to the URL path /contact.

How do you create a dynamic route for user profiles in Vue file-based routing?

A Create a file named <code>user.vue</code>

B Create a folder named <code>user</code>

C Create a file named <code>[user].vue</code>

D Create a file named <code>user-profile.vue</code>

Using square brackets like [user].vue creates a dynamic route that can accept different user IDs.

What happens if you create a folder blog inside pages and add post.vue inside it?

A URL becomes <code>/post</code>

B URL becomes <code>/blog/post</code>

C URL becomes <code>/pages/blog/post</code>

D No route is created

The folder name blog becomes part of the URL path, so the route is /blog/post.

Which file name creates the home page route / in Vue file-based routing?

A index.vue

B main.vue

C home.vue

D root.vue

The file named index.vue inside the pages folder maps to the root URL /.

What is a benefit of using file-based routing in Vue?

A It disables dynamic routing

B You must write all routes manually

C It only works for small projects

D Routes update automatically when you add or remove files

File-based routing automatically updates routes based on the files, making development faster and easier.

Explain how Vue uses file names and folders to create routes in file-based routing.

Think about how your folder and file structure looks like a website map.

Describe how to create a dynamic user profile page route using Vue file-based routing.

Dynamic routes use special file names to accept variables.