yoklainterview sim
ProgressHistory

Frontend Vue Router State Management Interview Questions

75 verified Frontend Vue Router State Management interview questions — solve with answers, learn from explanations, test yourself in a real simulation.

Try the real simulation →

Sample questions

Vue Router State ManagementDifficulty 1
In a Vue Router setup, what does <router-view /> do?
  • aIt renders a navigation menu built from the route config
  • bIt renders the component matched by the current route✓
  • cIt renders every registered route's component at once
  • dIt only renders on the root App.vue, nowhere else
Explanation:<router-view /> is a placeholder that renders whichever component the current URL matches according to the router config. It can be nested for nested routes and can appear more than once (named views), but its core job is always 'show the component for the active route'.
Vue Router State ManagementDifficulty 1
// router config
{ path: '/user/:id', component: UserView }

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

When the URL is /user/42, what does this log?
  • aundefined, because params only works with useRouter
  • bThe full path string /user/42
  • cThe string "42"✓
  • dA Promise that resolves to 42
Explanation:useRoute() returns the current route object; route.params holds the dynamic segments matched from the path, keyed by the name given in the route config (:id). This non-repeatable id param is a string, so route.params.id is "42", not a number.
Vue Router State ManagementDifficulty 1
What is the main difference between router.push('/about') and <router-link to="/about">?
  • arouter-link renders a clickable <a> element; router.push is the same navigation triggered programmatically from code✓
  • brouter.push reloads the whole page, router-link does not
  • crouter-link only works inside <template>, so it cannot navigate at all without router.push
  • dThey do completely unrelated things — one changes the URL, the other changes component state
Explanation:Both ultimately call the router's navigation logic; <router-link> is the declarative, template-friendly way to render a navigable anchor, while router.push() is the imperative API for triggering the same kind of navigation from JavaScript (e.g. after a form submits).
Vue Router State ManagementDifficulty 2
const routes = [
  { path: '/products', name: 'products', component: ProductList },
]
router.push({ name: 'products' })

What does this call do?
  • aIt throws, because push requires a path string, not an object
  • bIt navigates to /products by resolving the route with the matching name✓
  • cIt navigates to a route literally named /{ name: 'products' }
  • dIt only updates the URL without rendering the matched component
Explanation:router.push accepts either a path string or a location object. When given { name: 'products' }, the router looks up the route whose name matches and navigates to its resolved path — this is the standard 'named route' navigation pattern, useful because it decouples navigation code from the literal URL string.
Vue Router State ManagementDifficulty 2
What is the purpose of router.beforeEach((to, from, next) => { ... })?
  • aIt runs after every route change to clean up leftover DOM elements
  • bIt only runs once, when the app first mounts
  • cIt replaces <router-view> with custom rendering logic
  • dIt runs before every navigation, letting you inspect/redirect/cancel it (e.g. for auth checks)✓
Explanation:A global beforeEach guard fires before each navigation completes. It is the standard place for cross-cutting checks like 'is the user authenticated' — the guard can call next() to proceed, next(false) to cancel, or next('/login') to redirect.
Vue Router State ManagementDifficulty 2
// pinia store
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

What does the state option need to be, and why?
  • aA plain object literal { count: 0 }, so Pinia can freeze it for immutability
  • bAn async function, because state is always fetched from a server
  • cA function returning the initial state object, so each Pinia/store instance starts with a fresh state object✓
  • dA computed() call, since state must be derived from other reactive sources
Explanation:Pinia's state option must be a factory function (() => ({...})), not a plain object — this mirrors how Vue components define data(). The factory gives each Pinia/store instance a fresh initial state object, which is especially important when a new Pinia instance is created for each SSR request. Components using the same store in the same Pinia instance still intentionally share that store's state.

By specialization

Angular 450JavaScript 450React 450TypeScript 450Vue 450

By seniority

Frontend JuniorFrontend MidFrontend Senior

Other fields

BackendFullstackDevOps / CloudAI EngineerDatabaseMobileSecurityQA / Test AutomationData EngineerGame DevelopmentML Engineer

Test yourself against the 2925-question Frontend bank.

Start interview