// 1. 基礎(chǔ)通配符 - 只能匹配一級路徑
{
  path: '/:pathMatch(.*)',
  component: NotFound
}

// 2. 增強通配符 - 匹配多級路徑 (推薦！)
{
  path: '/:pathMatch(.*)*',  // 注意多了一個*
  component: NotFound
}

// 3. 舊版寫法 (不推薦)
{
  path: '*',
  redirect: '/404'
}

// 提取多段路徑參數(shù)
{
  path: '/user/:id+:action+', 
  // 匹配 /user/123/profile 得到 params: { id: '123', action: 'profile' }
  // 匹配 /user/456/settings/security 得到 params: { id: '456', action: 'settings/security' }
}

// 可選參數(shù)與正則約束
{
  path: '/search/:type(blog|article)?/:keyword', 
  // /search/article/vue  => { type: 'article', keyword: 'vue' }
  // /search/vue          => { type: undefined, keyword: 'vue' }
}

// 1. 簡單重定向
{ path: '/home', redirect: '/' }

// 2. 命名路由重定向
{ path: '/account', redirect: { name: 'userProfile' } }

// 3. 動態(tài)返回重定向目標(biāo)
{
  path: '/redirect/:path',
  redirect: to => decodeURIComponent(to.params.path)
}

// 4. 相對位置重定向
{ path: '/users/:id', redirect: './profile' } // 跳轉(zhuǎn)到 /users/:id/profile

// 5. 帶查詢參數(shù)的重定向
{ path: '/go-search', redirect: { path: '/search', query: { from: 'redirect' } } }

// 6. 保留hash的重定向
{ path: '/old', redirect: to => ({ ...to, path: '/new' }) }

// 7. 404智能回退
{
  path: '/:path(.*)',
  redirect: to => {
    // 根據(jù)路徑智能跳轉(zhuǎn)不同404頁面
    return to.path.startsWith('/admin') 
      ? '/admin-404' 
      : '/not-found'
  }
}

{
  path: '/dashboard',
  meta: {
    // 權(quán)限控制
    requiresAuth: true,
    permissions: ['view_dashboard'],
    
    // SEO優(yōu)化
    title: '控制面板',
    metaTags: [
      { name: 'description', content: '主控臺頁面' },
      { property: 'og:image', content: '/dashboard-preview.jpg' }
    ],
    
    // 過渡動畫
    transition: 'slide-left',
    
    // 功能開關(guān)
    featureFlags: ['new_ui', 'experimental_chart'],
    
    // 性能優(yōu)化
    preload: true,
    keepAlive: true,
    
    // 埋點追蹤
    analytics: {
      pageView: true,
      event: 'page_enter_dashboard'
    }
  }
}

export default {
  beforeRouteEnter(to, from, next) {
    // 這里不能訪問this！
    next(vm => {
      // 但可以在回調(diào)中訪問組件實例
      vm.fetchData(to.params.id)
    })
  },
  
  beforeRouteUpdate(to, from, next) {
    // 監(jiān)聽相同路由的參數(shù)變化
    if (to.params.id !== from.params.id) {
      this.refreshData(to.params.id)
    }
    next()
  },
  
  beforeRouteLeave(to, from, next) {
    // 表單未保存提示
    if (this.unsavedChanges) {
      next(confirm('確定要離開嗎？未保存的更改將會丟失'))
    } else {
      next()
    }
  }
}

// 1. 帶加載狀態(tài)的懶加載
const UserProfile = defineAsyncComponent({
  loader: () => import('./UserProfile.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200, // 延遲顯示加載組件
  timeout: 3000 // 超時時間
})

// 2. 預(yù)加載策略
{
  path: '/dashboard',
  component: () => import(/* webpackPrefetch: true */ './Dashboard.vue')
}

// 3. 分組打包
const User = () => import(/* webpackChunkName: "user" */ './User.vue')
const UserProfile = () => import(/* webpackChunkName: "user" */ './Profile.vue')

{
  path: '/user/:id',
  components: {
    default: UserProfile,
    sidebar: UserSidebar
  },
  props: {
    default: true, // 將params.id作為props傳遞
    sidebar: route => ({ 
      userId: route.params.id,
      collapsed: route.query.collapsed === 'true'
    })
  }
}

// 運行時添加路由
const router = createRouter({ /* ... */ })

// 添加管理后臺路由（權(quán)限控制）
if (user.isAdmin) {
  router.addRoute({
    path: '/admin',
    component: AdminLayout,
    children: [
      { path: 'dashboard', component: AdminDashboard },
      { path: 'users', component: UserManagement }
    ]
  })
}

// 刪除路由的兩種方式
router.removeRoute('admin') // 通過命名路由
router.getRoutes().forEach(route => {
  if (route.path.startsWith('/experimental')) {
    router.removeRoute(route.name)
  }
})

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 1. 返回頂部按鈕觸發(fā)
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        top: 30 // 偏移量
      }
    }
    
    // 2. 瀏覽器前進后退
    if (savedPosition) {
      return savedPosition
    }
    
    // 3. 特定路由記住位置
    if (from.meta.saveScroll) {
      return false // 不滾動
    }
    
    // 4. 默認(rèn)行為
    return { top: 0 }
  }
})

// 1. 條件性緩存
<router-view v-slot="{ Component }">
  <keep-alive :include="cachedViews">
    <component :is="Component" :key="$route.fullPath" />
  </keep-alive>
</router-view>

// 2. 基于路由meta的緩存控制
computed: {
  cachedViews() {
    return this.$route.matched
      .filter(route => route.meta.keepAlive)
      .map(route => route.components.default.name)
  }
}

// 3. 手動控制緩存
import { useDeactivated } from 'vue'

export default {
  setup() {
    onDeactivated(() => {
      // 組件離開時執(zhí)行清理
    })
  }
}

// 1. 路由變更日志
router.afterEach((to, from) => {
  console.log(
    `%c[路由變更] %c${from.path} → %c${to.path}`,
    'color: gray',
    'color: #999',
    'color: #4CAF50; font-weight: bold'
  )
})

// 2. 路由信息注入全局
app.config.globalProperties.$routeInfo = {
  current: computed(() => router.currentRoute.value),
  history: [] // 自定義路由歷史記錄
}

// 3. 可視化路由樹
console.log(
  '%c路由樹結(jié)構(gòu)',
  'color: purple; font-weight: bold',
  router.getRoutes().map(route => ({
    path: route.path,
    name: route.name,
    children: route.children.map(c => c.path)
  }))
)