Guards & Nested Routes

Preview — 3 of 10 questions

How do you define a route with an optional dynamic segment?

javascript

const routes = [
  // Optional param — matches /users and /users/123
  { path: '/users/:id?', component: UserProfile },

  // Required param — only matches /users/123
  { path: '/users/:id', component: UserProfile },

  // Zero or more — matches /tags, /tags/vue, /tags/vue/3
  { path: '/tags/:tag*', component: Tags },

  // One or more — matches /tags/vue but not /tags
  { path: '/tags/:tag+', component: Tags },

  // Custom regex for numeric only IDs
  { path: '/users/:id(\\d+)', component: UserProfile },

  // Named regex group
  { path: '/:locale(en|fr|de)/:path*', component: Localized }
]

// Accessing in component
const route = useRoute()
console.log(route.params.id) // '123' or undefined (if optional and not provided)

A{ path: '/users/[:id]', component: UserProfile }

B{ path: '/users/:id?', component: UserProfile }

C{ path: '/users/:id', optional: true, component: UserProfile }

D{ path: '/users/:id*', component: UserProfile }

How do you configure nested (child) routes in Vue Router?

javascript

const routes = [
  {
    path: '/users',
    component: UsersLayout, // Contains <router-view>
    children: [
      // /users — renders UserIndex
      { path: '', component: UserIndex },

      // /users/:id — renders UserProfile
      { path: ':id', component: UserProfile, name: 'user-profile' },

      // /users/:id/settings — renders UserSettings
      { path: ':id/settings', component: UserSettings }
    ]
  }
]

AUse multiple <router-view> components in App.vue

BUse <router-view name="child"> in the parent component

CPrefix child routes with the parent path in the routes array

DUse the children array in the parent route definition, and add <router-view> in the parent component's template

What does the return value of a beforeEach guard control?

javascript

router.beforeEach(async (to, from) => {
  // ❌ Old style with next() — still works but verbose
  // next()       // proceed
  // next(false)  // cancel
  // next('/login') // redirect

  // ✅ Modern return-based style
  if (to.meta.requiresAuth) {
    const isAuthenticated = await checkAuth()
    if (!isAuthenticated) {
      // Redirect to login, preserving the intended destination
      return { name: 'login', query: { redirect: to.fullPath } }
    }
  }

  // Also check roles
  if (to.meta.role && !hasRole(to.meta.role)) {
    return { name: 'forbidden' } // Redirect to 403 page
  }

  // Returning undefined or true = proceed
  // Returning false = cancel
  // Returning a route object = redirect
})

AThe return value has no effect; guards work via next() callback only

BReturning a string cancels navigation with an error message

CThe return value must always be true to allow navigation

DReturning false cancels navigation; returning a route location redirects; returning true or undefined proceeds

Answer all 10 questions (7 more), see explanations for every answer, and track your score.