Vue.js Assignment– 3

Vue Router

Basic Questions

  1. Create a router with dynamic route /users/:id and display the id on the page.
  2. Add a nested route /users/:id/profile under /users/:id and render both parent and child views.
  3. Pass route params as component props for /users/:id and read them in the component.
  4. Add a redirect from /u/:id to /users/:id and verify navigation.
  5. Create a catch-all 404 route that renders a NotFound component.
  6. Add a query string handler to /search and render q from ?q=term.
  7. Implement a global beforeEach guard that logs every navigation.
  8. Add a per-route guard on /admin that blocks navigation without a flag.
  9. Implement per-component guards (beforeRouteEnter/Update/Leave) on a details page.
  10. Add meta: { requiresAuth: true } to /dashboard and check it in a global guard.
  11. Add meta: { roles: [‘admin’] } to /admin and verify role check in a guard.
  12. Lazy-load the /reports route using dynamic import.
  13. Group multiple lazy routes into one chunk (webpackChunkName) and verify in devtools.
  14. Show a loading spinner while a lazy route component is being fetched.
  15. Implement scrollBehavior that restores savedPosition on back/forward.
  16. Customize scrollBehavior to scroll to top on route change by default.
  17. Support hash anchor scrolling: navigate to /docs#install and scroll to the element.
  18. Use router.push and router.replace and demonstrate the difference.
  19. Cancel navigation in a guard using next(false) (or returning false) and confirm stay.
  20. Add a link active class style and verify it updates on route changes.

Intermediate Questions

  1. Create nested routes for /projects/:id with children overview, issues, settings.
  2. Add a route with optional param /blog/:slug? and handle both cases.
  3. Use route props with a mapping function to convert page query to a number.
  4. Implement a global beforeResolve guard to start a page loader before data fetch.
  5. Implement a global afterEach hook to stop the loader and log route duration.
  6. Add a per-route guard that fetches user data; redirect to /login on 401.
  7. Add per-component beforeRouteUpdate to refetch data when :id changes.
  8. Create a role-based access system using meta.roles and a store; redirect unauthorized users.
  9. Add a route that lazy-loads and prefetches (use /* webpackPrefetch: true */) and verify network.
  10. Handle lazy-load failure: show a fallback component if dynamic import rejects.
  11. Programmatically add a route at runtime with router.addRoute and navigate to it.
  12. Remove a previously added route with router.removeRoute and verify 404.
  13. Use navigation guards to prevent leaving a dirty form (confirm dialog).
  14. Implement a login guard that refreshes token before allowing entry to protected routes.
  15. Persist last visited protected route and redirect there after successful login.
  16. Customize scrollBehavior to keep scroll for list → detail → back transitions only.
  17. Implement smooth scrolling to hash anchors using behavior: ‘smooth’.
  18. Create a param regex route /tickets/:id(\\d+) and block non-numeric IDs.
  19. Build a breadcrumb component using the matched route records.
  20. Add route-level code splitting for each /projects/:id/* child route and verify chunks.

Advanced Questions

  1. Build an auth-protected area using meta.requiresAuth, role checks, and silent token refresh in guards.
  2. Implement a loading skeleton + timeout fallback for slow lazy routes (cancel on user navigate away).
  3. Create a data-preload guard that fetches page data in beforeResolve and hydrates via props.
  4. Implement optimistic navigation: start rendering shell, fetch data, then replace content when ready.
  5. Add advanced scrollBehavior that restores per-tab scroll positions across multiple named views.
  6. Create a guarded wizard flow (/setup/step-1…step-3) that blocks skipping steps via direct URL.
  7. Implement route transitions with suspense: show a placeholder while both component and data load.
  8. Build a permissions matrix using meta fields (scopes) and enforce them in a single global guard.
  9. Add runtime feature flags to enable/disable routes without redeploy (use addRoute/removeRoute).
  10. Final Hands-on Project:
    • App with dynamic + nested routes, 404, and redirects
    • Global, per-route, and per-component guards for auth, roles, and unsaved changes
    • Route meta for authorization; token refresh flow in guards
    • Route-level lazy loading with error + loading states and chunk grouping
    • Custom scrollBehavior for savedPosition, hash anchors, and smooth restore
    • Breadcrumbs from matched records and verified code-split chunks