Defining routes in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of defining routes in a Vue application?

Defining routes lets you connect URLs to specific components. It helps users navigate different pages or views in the app without reloading the whole page.

beginner

How do you define a simple route in Vue Router?

You create a route object with a path and a component. For example:

{ path: '/home', component: Home }

This means when the URL is '/home', the Home component shows.

intermediate

What is the role of createRouter and createWebHistory in Vue Router?

createRouter makes the router instance with all routes. createWebHistory tells Vue Router to use browser history mode, so URLs look clean without hashes (#).

intermediate

How can you define nested routes in Vue Router?

Nested routes are defined inside a route's children array. Each child route has its own path and component. This lets you show components inside parent components.

intermediate

What happens if a user visits a URL that does not match any defined route?

You can define a 'catch-all' route with path /:pathMatch(.*)* to show a 'Not Found' component. This handles unknown URLs gracefully.

Which Vue Router function creates the router instance?

A createRoute

B defineRouter

C useRouter

D createRouter

createRouter is used to create the router instance with routes and history mode.

What does the path property in a route define?

A The component to render

B The URL segment to match

C The router mode

D The navigation guard

The path defines the URL segment that triggers the route.

How do you define a nested route in Vue Router?

A Inside the <code>children</code> array of a route

B Using <code>nested: true</code> property

C By adding multiple <code>path</code> properties

D By creating separate router instances

Nested routes go inside the children array of a parent route.

Which history mode removes the hash (#) from URLs in Vue Router?

A createWebHashHistory

B createMemoryHistory

C createWebHistory

D createHistory

createWebHistory uses the browser's history API for clean URLs without hashes.

What path pattern is used to catch all unmatched routes in Vue Router?

A /:pathMatch(.*)*

B /404

C /notfound

D /:catchAll*

The pattern /:pathMatch(.*)* matches any route not defined earlier.

Explain how to set up basic routing in a Vue application using Vue Router.

Think about how URLs connect to components and how Vue Router manages this.

Describe how nested routes work in Vue Router and why they are useful.

Imagine a page with tabs or sections inside it.