RouterLink for navigation in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is <RouterLink> used for in Vue?

<RouterLink> is a special component in Vue Router that creates clickable links to navigate between pages without reloading the whole app.

beginner

How do you specify the target route in <RouterLink>?

You use the to attribute with a string path or an object describing the route to tell <RouterLink> where to go.

beginner

What happens when you click a <RouterLink> in a Vue app?

Clicking a <RouterLink> changes the URL and shows the new page component without reloading the browser, making navigation fast and smooth.

intermediate

How can you style an active <RouterLink>?

Vue Router adds a CSS class like <code>router-link-active</code> to the active link, so you can style it differently with CSS.

intermediate

Can <RouterLink> be used with dynamic route parameters?

Yes! You can pass an object to to with name and params to navigate to routes with dynamic parts.

What attribute do you use to set the destination in <RouterLink>?

A link

B href

C to

D target

The to attribute tells where to navigate.

What does <RouterLink> do differently than a normal <a> tag?

A Reloads the whole page

B Navigates without reloading the page

C Opens a new browser tab

D Does nothing

changes pages without reloading, making navigation faster.

How can you style the currently active <RouterLink>?

A You cannot style it

B Using the <code>active</code> attribute

C Using inline styles only

D Using the <code>router-link-active</code> CSS class

Vue Router adds router-link-active class to active links for styling.

Which of these is a valid way to use <RouterLink>?

A <RouterLink to="/home">Home</RouterLink>

B <RouterLink href="/home">Home</RouterLink>

C <RouterLink link="/home">Home</RouterLink>

D <RouterLink target="/home">Home</RouterLink>

The to attribute is correct for .

How do you pass parameters to a dynamic route with <RouterLink>?

A Use <code>:to="{ name: 'user', params: { id: 123 } }"</code>

B Use <code>to="/user/:id"</code>

C Use <code>href="/user/123"</code>

D Use <code>params="id=123"</code>

Passing an object with name and params is the correct way.

Explain how helps with navigation in a Vue app.

Think about how clicking a link changes the page smoothly.

Describe how to use with dynamic route parameters.

Focus on how to tell Vue Router which dynamic page to show.