Route parameters with useRoute in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue component display when the route parameter 'id' is '42'?

Consider this Vue 3 component using useRoute to access route parameters.

import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute();
    return { id: route.params.id };
  },
  template: `
User ID: {{ id }}
`
});

If the current route is /user/42 where id is a route param, what will be rendered?

Vue

import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute();
    return { id: route.params.id };
  },
  template: `<div>User ID: {{ id }}</div>`
});

A <div>User ID: 42</div>

B <div>User ID: {{ id }}</div>

C <div>User ID: undefined</div>

D <div>User ID: </div>

💡 Hint

Remember that useRoute() gives access to the current route's parameters.

The useRoute() hook returns the current route object. Accessing route.params.id retrieves the 'id' parameter from the URL. If the URL is /user/42, then id is '42', so the component renders User ID: 42.

📝 Syntax

intermediate

Which option correctly accesses a nested route parameter 'postId' using useRoute?

Given a nested route with parameter postId, which code correctly extracts it inside setup()?

Vue

import { useRoute } from 'vue-router';

export default {
  setup() {
    // Which option correctly gets postId?
  }
}

A const route = useRoute; const postId = route.params.postId;

B const { postId } = useRoute.params;

C const route = useRoute(); const postId = route.params.postId;

D const postId = useRoute().params.postId;

💡 Hint

Remember useRoute is a function that returns the route object.

Option C correctly calls useRoute() to get the route object, then accesses params.postId. Option C tries to access params on the function itself, which is invalid. Option C calls useRoute() inline, which is valid but less clear. Option C assigns the function itself without calling it, so route.params is undefined.

❓ state_output

advanced

What is the value of 'userId' after route changes from '/user/1' to '/user/5' in this component?

Consider this Vue 3 component that uses useRoute and a watch to update userId:

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = ref(route.params.id);

    watch(() => route.params.id, (newId) => {
      userId.value = newId;
    });

    return { userId };
  }
};

If the route changes from /user/1 to /user/5, what will be the value of userId.value?

Vue

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = ref(route.params.id);

    watch(() => route.params.id, (newId) => {
      userId.value = newId;
    });

    return { userId };
  }
};

A 5

B 1

C undefined

D null

💡 Hint

The watch updates userId when the route param changes.

The watch listens for changes to route.params.id. When the route changes from '/user/1' to '/user/5', the watcher runs and updates userId.value to '5'.

🔧 Debug

advanced

Why does this component show 'undefined' for route param 'productId'?

Look at this Vue 3 component:

import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute;
    return { productId: route.params.productId };
  },
  template: `
Product: {{ productId }}
`
});

When the route is /product/10, the component shows Product: undefined. Why?

Vue

import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute;
    return { productId: route.params.productId };
  },
  template: `<div>Product: {{ productId }}</div>`
});

A Because productId is not defined in the route params.

B Because useRoute must be imported from 'vue' not 'vue-router'.

C Because the template syntax is incorrect and does not interpolate productId.

D Because useRoute is not called as a function, so route is the function itself, not the route object.

💡 Hint

Check how useRoute is used in setup().

The code assigns route = useRoute without calling it. So route is the function, not the route object. Accessing route.params is undefined, causing productId to be undefined.

🧠 Conceptual

expert

Which statement about useRoute and reactive route params is true?

Consider the following statements about useRoute in Vue Router:

1. useRoute() returns a reactive route object.
2. Route params accessed via useRoute().params are reactive and update automatically.
3. Directly destructuring params like const { id } = useRoute().params keeps id reactive.
4. Watching useRoute().params.id is the recommended way to react to param changes.

Which is the only true statement?

A Only statement 3 is true; destructuring keeps reactivity but useRoute is not reactive.

B Only statements 1 and 2 are true; destructuring breaks reactivity, and watching params.id is correct.

C All statements are true; destructuring keeps reactivity and watching params.id works fine.

D Only statement 4 is true; useRoute is not reactive but watching params.id works.

💡 Hint

Think about how destructuring affects reactivity in Vue.

useRoute() returns a reactive route object, so statements 1 and 2 are true. However, destructuring const { id } = useRoute().params breaks reactivity because it copies the value, so statement 3 is false. Watching useRoute().params.id is the recommended way to react to param changes, so statement 4 is true. But since statement 4 is true and 3 is false, only 1 and 2 are fully true together.