Dynamic Routing and Lazy Loading

Dynamic routing and lazy loading are two common techniques that help improve application performance, especially in large applications. They are often used together to reduce the initial load size by loading on demand.

Dynamic Routing

Dynamic routing means that the path or component of the route is dynamically generated at runtime, rather than statically defined. This allows you to dynamically create or configure routes based on certain conditions.

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('./components/User.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

In this example, /user/:id is a dynamic route. :id is a dynamic parameter, indicating that different user IDs can be passed in.

Lazy Loading

Lazy loading is often combined with dynamic import (import()), allowing route components to be loaded on demand, as shown in the dynamic import example above.

Composition API for Routing (e.g., useRoute and useRouter)

useRoute

useRoute is a Composition API that returns the current route state object (RouteLocation), containing information about the current route, such as the route path, query parameters, route parameters, etc.

• path: The path of the current route
• params: Route parameters, usually provided by dynamic routes :param
• query: URL query parameters
• hash: The hash value of the current URL
• fullPath: The full route path, including query strings and hash
• name: The name of the current route (if any)
• matched: The route records matched by the current route (including all nested routes)

useRouter

useRouter is another Composition API that returns the current router instance, allowing you to perform navigation and routing operations.

• push: Navigate to the specified route (can pass a path or route object)
• replace: Navigate to the specified route and replace the current history record (without leaving a history record)
• go: Navigate to a position in the history record (similar to browser forward and backward)
• back: Go back to the previous page (similar to browser back)
• forward: Go forward to the next page (similar to browser forward)
• getCurrentLocation: Get the path of the current route

Implementation of Nested Routes and Route Guards

Nested routes and route guards are important features for managing routes and page access control.

Nested Routes

Vue Router allows you to nest routes, so you can display multiple views on the same page, creating a hierarchical structure between parent and child components.

// routes.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import User from './components/User.vue';
import UserProfile from './components/UserProfile.vue';
import UserPosts from './components/UserPosts.vue';

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

In the example above, /user/:id is the parent route, while profile and posts are its child routes. The child routes will be rendered in the <router-view> of the parent route component.

Route Guards

Route guards are used to control page access permissions, ensuring that users meet the expected conditions when accessing specific routes. Vue Router provides several types of route guards:

• Global Guards: Apply to all routes
• Route-Specific Guards: Apply to specific routes
• Component Guards: Defined within components

Route guards are essentially bound to various events in the route configuration, with related events (or route lifecycle) including:

• beforeEach (Global Before Guard)
• afterEach (Global After Guard)
• beforeEnter (Route-Specific Guard)
• beforeRouteEnter (Component Guard)
• beforeRouteUpdate (Component Guard)
• beforeRouteLeave (Component Guard)

Generally, each lifecycle hook receives parameters specifying where the route comes from, where it is going, and a next function. The next function can take parameters to navigate to a specified page (route), or allow the current route to pass if no parameters are provided.