What are nested routes and why are they useful?

WHAT THIS TESTS: This question probes whether you understand that modern single-page app routers mirror URL structure to component hierarchy. It checks if you know how to use nested route configurations and nested router-view outlets to build persistent layouts without repeating code. The interviewer wants to see that you think in terms of component trees driven by URL segments rather than treating every page as an isolated top-level view.

A GOOD ANSWER COVERS: Four things in order. First, a definition: nested routes are child route objects declared under a parent route's children array that render inside a nested router-view outlet in the parent component. Second, the why: they keep parent shell components such as navigation sidebars, tabs, or context headers mounted and persistent while only the child region swaps, preserving local state and avoiding layout duplication. Third, the mechanism: the parent component template contains its own router-view below its persistent UI, and the router matches the remaining URL segment against the children array to decide which component to inject. Fourth, a concrete scenario: a user dashboard where /user/:id is the parent route rendering a User shell with a nested router-view, and /user/:id/profile and /user/:id/posts are child routes that render UserProfile and UserPosts inside that outlet.

COMMON WRONG ANSWERS: Treating every route as a top-level path and copying the parent layout into each child component. This breaks DRY and destroys parent-level state when navigating between siblings. Another red flag is claiming nested routes require deeply nested URLs; candidates should know that a child path starting with / is treated as a root path, so you can nest components without nesting the URL. Finally, forgetting that visiting the parent path without a child match leaves the nested router-view empty unless you provide an empty path child.

LIKELY FOLLOW-UPS: How do you handle a default child view when the parent route matches? How do named routes interact with nested children? What happens to parent route guards or data fetching when only the child segment changes? How would you implement breadcrumbs or deep-linking tabs with nested routes?

ONE CONCRETE EXAMPLE: Imagine a SaaS admin panel. The route /admin has a parent Admin component with a sidebar and a main content area containing a router-view. Nested children include /admin/users rendering a UserList, /admin/users/:id rendering a UserDetail, and /admin/settings rendering SettingsPanel. Navigating between users and settings keeps the sidebar mounted and its scroll position intact, while only the main content area updates. If you visit /admin alone, an empty path child renders a dashboard overview so the outlet is never blank.