Vue Router installation and setup - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you navigate to a route not defined in Vue Router?

Consider a Vue 3 app using Vue Router. The router has only two routes defined: '/' and '/about'. What will the app display if the user navigates to '/contact'?

Vue

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

A The app automatically redirects to the '/' route.

B The app shows a blank page because no route matches '/contact'.

C The app shows the About component because it's the closest match.

D The app throws a runtime error and crashes.

💡 Hint

Think about what Vue Router does when no route matches the URL.

If a user navigates to a path not defined in the router, Vue Router does not render any component, resulting in a blank page. It does not redirect or throw an error by default.

📝 Syntax

intermediate

Which code correctly installs Vue Router in a Vue 3 app?

You want to add Vue Router to your Vue 3 app. Which code snippet correctly sets up the router and integrates it with the app?

A

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
router.use(app);
app.mount('#app');

B

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.mount('#app');
app.use(router);

C

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router).mount('#app');

D

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

💡 Hint

Remember the order: create app, use plugins, then mount.

You must call app.use(router) before mounting the app. Option D does this correctly. Option D mounts before using router, so router won't work. Option D tries chaining use and mount which is valid in Vue 3. Option D calls router.use(app) which is not a Vue Router method.

❓ state_output

advanced

What is the value of $route.path after navigating programmatically?

In a Vue 3 app with Vue Router, you run router.push('/dashboard'). What will this.$route.path be immediately after?

Vue

import { createRouter, createWebHistory } from 'vue-router';
const routes = [{ path: '/dashboard', component: {} }];
const router = createRouter({ history: createWebHistory(), routes });

// Assume inside a component method:
async function navigate() {
  await router.push('/dashboard');
  console.log(this.$route.path);
}

A '/dashboard'

B '/'

C undefined

D Throws an error because $route is undefined

💡 Hint

Think about what router.push does and when $route updates.

After await router.push('/dashboard'), the route changes and this.$route.path reflects the new path '/dashboard'.

🔧 Debug

advanced

Why does this Vue Router setup cause a blank page?

Look at this router setup code. The app shows a blank page on navigation. What is the cause?

Vue

import { createRouter, createWebHistory } from 'vue-router';
import Home from './Home.vue';

const routes = [
  { path: '/', component: Home }
];

const router = createRouter({
  history: createWebHistory('/app/'),
  routes
});

export default router;

A The base URL '/app/' in createWebHistory does not match the actual app base, causing routing failure.

B The Home component is not imported correctly, so nothing renders.

C createWebHistory requires no arguments; passing '/app/' causes a syntax error.

D The routes array is empty, so no routes exist.

💡 Hint

Check if the history base matches the app's deployment path.

If the base URL in createWebHistory does not match the app's actual base path, Vue Router cannot match routes correctly, resulting in a blank page. The other options are incorrect because the component is imported, routes exist, and passing a base string is valid.

🧠 Conceptual

expert

Which statement about Vue Router's createWebHistory is true?

Choose the correct statement about createWebHistory in Vue Router.

A <code>createWebHistory</code> appends a hash (#) to URLs to manage routing.

B <code>createWebHistory</code> automatically falls back to hash mode if the browser does not support History API.

C <code>createWebHistory</code> uses the HTML5 History API and requires server configuration to handle fallback routes.

D <code>createWebHistory</code> disables browser back and forward buttons to control navigation.

💡 Hint

Think about how URLs look and what the server needs to do.

createWebHistory uses the browser's History API to create clean URLs without hashes. This requires the server to be configured to serve the app's index.html for all routes to avoid 404 errors. It does not fallback automatically, does not use hashes, and does not disable navigation buttons.

Practice

1. What is the main purpose of Vue Router in a Vue application?

easy

A. To manage navigation between different pages or views

B. To style components with CSS

C. To handle data fetching from APIs

D. To compile Vue components into JavaScript

Solution

1. Step 1: Understand Vue Router's role

   Vue Router is designed to help Vue apps navigate between different pages or views smoothly.

2. Step 2: Compare with other options

   Styling, data fetching, and compiling are handled by other tools, not Vue Router.

3. Final Answer:

   To manage navigation between different pages or views -> Option A

4. Quick Check:

   Vue Router = Navigation [OK]

Hint: Vue Router controls page navigation in Vue apps [OK]

Common Mistakes:

• Confusing Vue Router with styling or data fetching tools
• Thinking Vue Router compiles components
• Assuming Vue Router manages state

2. Which of the following is the correct way to install Vue Router in a Vue 3 project using npm?

easy

A. npm install vue-router@3

B. npm install vue-router@4

C. npm install vue-router@2

D. npm install vue-router@5

Solution

1. Step 1: Identify Vue Router version for Vue 3

   Vue 3 uses Vue Router version 4, so you must install vue-router@4.

2. Step 2: Check other versions

   Versions 2 and 3 are for Vue 2 or earlier, and version 5 does not exist yet.

3. Final Answer:

   npm install vue-router@4 -> Option B

4. Quick Check:

   Vue 3 uses Vue Router 4 [OK]

Hint: Vue 3 pairs with vue-router version 4 [OK]

Common Mistakes:

• Installing older Vue Router versions for Vue 3
• Using a non-existent version number
• Forgetting to specify version for compatibility

3. Given this Vue Router setup code, what will be the rendered output when navigating to '/about'?

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

And in App.vue template:

<router-view />

medium

A. The Home component content is shown

B. An error occurs because routes are missing

C. Nothing is shown because router is not used

D. The About component content is shown

Solution

1. Step 1: Understand route matching

   When the URL is '/about', Vue Router matches the route with path '/about' and renders the About component.

2. Step 2: Check router-view usage

   The <router-view /> in App.vue displays the matched component, so About content appears.

3. Final Answer:

   The About component content is shown -> Option D

4. Quick Check:

   URL '/about' shows About component [OK]

Hint: URL path matches route, router-view shows that component [OK]

Common Mistakes:

• Assuming Home shows for all paths
• Forgetting router-view renders matched component
• Thinking router must be manually mounted in template

4. What is wrong with this Vue Router setup code?

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Contact from './components/Contact.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/contact', component: Contact }
];

const router = createRouter({
  history: createWebHistory,
  routes
});

export default router;

medium

A. Components Home and Contact are not imported

B. Routes array is empty

C. createWebHistory is missing parentheses when used

D. Router is not created with createRouter function

Solution

1. Step 1: Check createWebHistory usage

   createWebHistory is a function and must be called with parentheses: createWebHistory()

2. Step 2: Verify other parts

   Routes are defined with imported components, router is created correctly.

3. Final Answer:

   createWebHistory is missing parentheses when used -> Option C

4. Quick Check:

   Functions need parentheses to execute [OK]

Hint: Call createWebHistory() with () to avoid errors [OK]

Common Mistakes:

• Forgetting parentheses on createWebHistory
• Believing routes array is empty
• Misnaming createRouter function

5. You want to add a navigation menu with links to Home and About pages using Vue Router. Which template code correctly uses Vue Router components for navigation?

hard

A.
Home
About

B.
Home
About

C.
Home
About

D.
Home
About

Solution

1. Step 1: Use correct attribute for router-link

   The correct attribute to specify the route path is 'to', not 'href'.

2. Step 2: Use correct path format

   Paths must start with '/', so '/about' is correct, while 'about' without slash is incorrect.

3. Final Answer:

   Use <router-link to="/"> and <router-link to="/about"> with router-view -> Option A

4. Quick Check:

   router-link uses 'to' with leading slash paths [OK]

Hint: Use 'to' attribute with leading slash in router-link [OK]

Common Mistakes:

• Using 'href' instead of 'to' in router-link
• Omitting leading slash in paths
• Using plain anchor tags instead of router-link