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.