Location>code7788 >text

Advanced practical combat for Vue3 routing: In-depth analysis parameter delivery and navigation guard core technology

Popularity：227 ℃/2025-03-04 22:57:07

1. Advanced application skills for routing parameter transfer

1.1 Routing configuration and parameter verification

// router/
 {
   path: '/user/:userId(\\d+)', // Use regular expression to limit only matching numbers
   name: 'UserDetail',
   component: () => import('../views/'),
   props: true // Enable props parameter transfer mode
 }

Technical points:

  • Improve parameter security by constraining the parameter format with regular expressions (such as\\d+Limit to numbers)
  • Use lazy routing to improve performance
  • Enable props mode to achieve component decoupling

1.2 Three ways to receive component parameters

<!-- -->
 <script setup>
 // Method 1: Get it through useRoute
 const route = useRoute()
 ()

 // Method 2: Receive through props (recommended)
 const props = defineProps({
   userId: {
     type: [String, Number],
     required: true
   }
 })

 // Method 3: Change of watch parameters
 watch(() => , (newVal) => {
   // Handle parameter change logic
 })
 </script>

2. Query parameters: realize complex data transmission

2.1 Query parameter delivery skills

usequeryObjects are passed through non-sensitive data and support object nesting:

// Programming navigation
 ({
   path: '/search',
   query: {
     keywords: 'vue3',
     filters: {
       sort: 'latest',
       Page: 2
     }
   }
 });

2.2 Parameter serialization and deserialization

Automatic conversion of complex objects is achieved through routing configuration:

//Routing configuration
 {
   path: '/search',
   name: 'Search',
   component: SearchView,
   props: (route) => ({
     keywords: ,
     filters: ()
   })
 }

Note: URLs will automatically encode URI, and special characters need to be processed

2.3 Best practices for safe parameter transfer

// Use encodeURIComponent to handle special characters
 const searchParams = {
   q: encodeURIComponent('vue3+router'),
   Page: 1
 }
 ({ path: '/search', query: searchParams })

2.4 Type conversion and default value processing

// Handle numerical parameters
 const page = Number() || 1
 const minPrice = parseFloat() ?? 0

 // Date parameter processing
 const startDate =
   ? new Date()
   : new Date()

3. Navigation Guard: Building a Secure Routing System

3.1 Analysis of the entire process of guard execution

Guard Type Execution timing Use scenarios
beforeEach Global front guard Permission verification, login status check
beforeResolve Global Analysis Guard Data preload
afterEach Global back hook Page access statistics
beforeEnter Route exclusive guard Specific routing permission control
Guardian inside components When component creation/update/destroy Data storage, departure confirmation

3.2 Global front guard (multi-level permission control system)

// Global Front Guard Advanced Edition
 (async (to, from) => {
   const requiresAuth = (record => )
   const userStore = useUserStore()

   // Logged in user access login page redirection
   if ( === 'Login' && ) {
     return { name: 'Home' }
   }

   // Routing processing that requires authentication
   if (requiresAuth && !) {
      =
     return { name: 'Login' }
   }

   // Dynamic permission verification
   if () {
     const hasPermission = await checkPermissions()
     if (!hasPermission) return { name: 'Forbidden' }
   }
 })

3.3 Route exclusive guard

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to) => {
    const requiredRole = ;
    const userRole = useAuthStore().;
    
    if (requiredRole && !(userRole)) {
      return '/403';
    }
  }
}

3.4 Practical skills of component guarding

<script setup>
 // Asynchronous processing of leaving the guard
 onBeforeRouteLeave(async (to, from, next) => {
   if () {
     try {
       await saveDraft()
       next()
     } catch (error) {
       next(false)
       showError('Auto-save failed, please save manually')
     }
   } else {
     next()
   }
 })

 // Parameter change processing
 onBeforeRouteUpdate(async (to) => {
   await loadUserData()
   (0, 0)
 })
 </script>

4. Performance optimization and best practices

4.1 Lazy loading of routes

Improve the loading speed of the first screen through dynamic import:

const routes = [
  {
    path: '/about',
    component: () => import('../views/')
  }
];

4.2 Routing meta information

Use meta fields to implement extended functions:

{
   path: '/admin',
   component: AdminPanel,
   meta: {
     requiresAuth: true,
     role: ['admin', 'superuser'],
     keepAlive: true // Control page cache
   }
 }

4.3 Error handling scheme

Unified handling of routing exceptions:

((error, to) => {
  if (('Failed to fetch')) {
    ({ name: 'NetworkError', query: { path:  } });
  }
});

5. Frequently Asked Questions

5.1 Troubleshooting of parameter loss

  • Scene: Parameters are lost after page refresh
  • Solution：
    1. uselocalStorageTemporary storage of key parameters
    2. Configure the server to support History mode
    3. usebeforeEachGuard Verify Parameter Validity

5.2 Handling navigation loop problem

// Add a termination condition in the global guard
 ((to, from) => {
   if ( === 'Login' && === 'Login') {
     return false // Terminate navigation loop
   }
 })

Written at the end
hello! Hello everyone, I am Code_Cracke, a friend who loves programming. Here, I will share some practical development skills and experiences. If you are also passionate about programming, please follow and communicate and learn together!

If you have any questions, suggestions or unique insights about this article, please leave a message in the comment area. Whether it is discussing technical details or sharing project experience, we can make progress together.

<Previous Next>