// router/index.js
{
  path: '/user/:userId(\\d+)', // 使用正則表達式限制只匹配數(shù)字
  name: 'UserDetail',
  component: () => import('../views/UserDetail.vue'),
  props: true // 啟用props傳參模式
}

<!-- UserDetail.vue -->
<script setup>
// 方式1：通過useRoute獲取
const route = useRoute()
console.log(route.params.userId)
// 方式2：通過props接收（推薦）
const props = defineProps({
  userId: {
    type: [String, Number],
    required: true
  }
})
// 方式3：watch參數(shù)變化
watch(() => route.params.userId, (newVal) => {
  // 處理參數(shù)變化邏輯
})
</script>

// 編程式導航
router.push({
  path: '/search',
  query: {
    keywords: 'vue3',
    filters: {
      sort: 'latest',
      page: 2
    }
  }
});

// 路由配置
{
  path: '/search',
  name: 'Search',
  component: SearchView,
  props: (route) => ({
    keywords: route.query.keywords,
    filters: JSON.parse(route.query.filters)
  })
}

// 使用encodeURIComponent處理特殊字符
const searchParams = {
  q: encodeURIComponent('vue3+router'),
  page: 1
}
router.push({ path: '/search', query: searchParams })

// 處理數(shù)字類型參數(shù)
const page = Number(route.query.page) || 1
const minPrice = parseFloat(route.query.minPrice) ?? 0
// 日期參數(shù)處理
const startDate = route.query.startDate 
  ? new Date(route.query.startDate)
  : new Date()

// 全局前置守衛(wèi)進階版
router.beforeEach(async (to, from) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const userStore = useUserStore()
  // 已登錄用戶訪問登錄頁重定向
  if (to.name === 'Login' && userStore.isAuthenticated) {
    return { name: 'Home' }
  }
  // 需要認證的路由處理
  if (requiresAuth && !userStore.isAuthenticated) {
    userStore.returnUrl = to.fullPath
    return { name: 'Login' }
  }
  // 動態(tài)權限校驗
  if (to.meta.permissions) {
    const hasPermission = await checkPermissions(to.meta.permissions)
    if (!hasPermission) return { name: 'Forbidden' }
  }
})

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

<script setup>
// 離開守衛(wèi)的異步處理
onBeforeRouteLeave(async (to, from, next) => {
  if (formDataChanged.value) {
    try {
      await saveDraft()
      next()
    } catch (error) {
      next(false)
      showError('自動保存失敗，請手動保存')
    }
  } else {
    next()
  }
})
// 參數(shù)變化處理
onBeforeRouteUpdate(async (to) => {
  await loadUserData(to.params.userId)
  window.scrollTo(0, 0)
})
</script>

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

{
  path: '/admin',
  component: AdminPanel,
  meta: {
    requiresAuth: true,
    role: ['admin', 'superuser'],
    keepAlive: true  // 控制頁面緩存
  }
}

router.onError((error, to) => {
  if (error.message.includes('Failed to fetch')) {
    router.push({ name: 'NetworkError', query: { path: to.fullPath } });
  }
});

// 在全局守衛(wèi)中添加終止條件
router.beforeEach((to, from) => {
  if (to.name === 'Login' && from.name === 'Login') {
    return false // 終止導航循環(huán)
  }
})