// 路由信息對(duì)象結(jié)構(gòu)
{
  path: '/user/123/profile?tab=info',    // 完整路徑
  fullPath: '/user/123/profile?tab=info&token=abc',
  name: 'user-profile',                   // 命名路由名稱
  params: {                               // 動(dòng)態(tài)路徑參數(shù)
    id: '123'
  },
  query: {                                // 查詢參數(shù)
    tab: 'info',
    token: 'abc'
  },
  hash: '#section-2',                     // 哈希片段
  meta: {                                 // 路由元信息
    requiresAuth: true,
    title: '用戶資料'
  },
  matched: [                              // 匹配的路由記錄數(shù)組
    { path: '/user', component: UserLayout, meta: {...} },
    { path: '/user/:id', component: UserContainer, meta: {...} },
    { path: '/user/:id/profile', component: UserProfile, meta: {...} }
  ]
}

<template>
  <div>
    <h1>用戶詳情頁(yè)</h1>
    <p>用戶ID: {{ $route.params.id }}</p>
    <p>當(dāng)前標(biāo)簽: {{ $route.query.tab || 'default' }}</p>
    <p>需要認(rèn)證: {{ $route.meta.requiresAuth ? '是' : '否' }}</p>
  </div>
</template>

<script>
export default {
  created() {
    // 訪問(wèn)路由信息
    console.log('路徑:', this.$route.path)
    console.log('參數(shù):', this.$route.params)
    console.log('查詢:', this.$route.query)
    console.log('哈希:', this.$route.hash)
    console.log('元信息:', this.$route.meta)
    
    // 獲取完整的匹配記錄
    const matchedRoutes = this.$route.matched
    matchedRoutes.forEach(route => {
      console.log('匹配的路由:', route.path, route.meta)
    })
  }
}
</script>

<script setup>
import { useRoute } from 'vue-router'
import { watch, computed } from 'vue'

// 獲取路由實(shí)例
const route = useRoute()

// 直接使用
console.log('當(dāng)前路由路徑:', route.path)
console.log('路由參數(shù):', route.params)

// 計(jì)算屬性基于路由
const userId = computed(() => route.params.id)
const isEditMode = computed(() => route.query.mode === 'edit')

// 監(jiān)聽路由變化
watch(
  () => route.params.id,
  (newId, oldId) => {
    console.log(`用戶ID從 ${oldId} 變?yōu)?${newId}`)
    loadUserData(newId)
  }
)

// 監(jiān)聽多個(gè)路由屬性
watch(
  () => ({
    id: route.params.id,
    tab: route.query.tab
  }),
  ({ id, tab }) => {
    console.log(`ID: ${id}, Tab: ${tab}`)
  },
  { deep: true }
)
</script>

<template>
  <div>
    <h1>用戶 {{ userId }} 的資料</h1>
    <nav>
      <router-link :to="{ query: { tab: 'info' } }" 
                   :class="{ active: route.query.tab === 'info' }">
        基本信息
      </router-link>
      <router-link :to="{ query: { tab: 'posts' } }"
                   :class="{ active: route.query.tab === 'posts' }">
        動(dòng)態(tài)
      </router-link>
    </nav>
  </div>
</template>

// 全局守衛(wèi)
router.beforeEach((to, from, next) => {
  // to: 即將進(jìn)入的路由
  // from: 當(dāng)前導(dǎo)航正要離開的路由
  
  console.log('前往:', to.path)
  console.log('來(lái)自:', from.path)
  console.log('需要認(rèn)證:', to.meta.requiresAuth)
  
  // 權(quán)限檢查
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 保存目標(biāo)路徑
    })
  } else {
    next()
  }
})

// 組件內(nèi)守衛(wèi)
export default {
  beforeRouteEnter(to, from, next) {
    // 不能訪問(wèn) this，因?yàn)榻M件實(shí)例還沒創(chuàng)建
    console.log('進(jìn)入前:', to.params.id)
    
    // 可以通過(guò) next 回調(diào)訪問(wèn)實(shí)例
    next(vm => {
      vm.initialize(to.params.id)
    })
  },
  
  beforeRouteUpdate(to, from, next) {
    // 可以訪問(wèn) this
    console.log('路由更新:', to.params.id)
    this.loadData(to.params.id)
    next()
  },
  
  beforeRouteLeave(to, from, next) {
    // 離開前的確認(rèn)
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('有未保存的更改，確定離開嗎？')
      if (!answer) {
        next(false) // 取消導(dǎo)航
        return
      }
    }
    next()
  }
}

export default {
  methods: {
    getCurrentRouteInfo() {
      // 獲取當(dāng)前路由信息（非響應(yīng)式）
      const currentRoute = this.$router.currentRoute
      
      // Vue Router 4 中的變化
      // const currentRoute = this.$router.currentRoute.value
      
      console.log('當(dāng)前路由對(duì)象:', currentRoute)
      
      // 編程式導(dǎo)航時(shí)獲取
      this.$router.push({
        path: '/user/456',
        query: { from: currentRoute.fullPath } // 攜帶來(lái)源信息
      })
    },
    
    // 檢查是否在特定路由
    isActiveRoute(routeName) {
      return this.$route.name === routeName
    },
    
    // 檢查路徑匹配
    isPathMatch(pattern) {
      return this.$route.path.startsWith(pattern)
    }
  },
  
  computed: {
    // 基于當(dāng)前路由的復(fù)雜計(jì)算
    breadcrumbs() {
      return this.$route.matched.map(route => ({
        name: route.meta?.breadcrumb || route.name,
        path: route.path
      }))
    },
    
    // 獲取嵌套路由參數(shù)
    nestedParams() {
      const params = {}
      this.$route.matched.forEach(route => {
        Object.assign(params, route.params)
      })
      return params
    }
  }
}

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    props: true // 將 params 作為 props 傳遞
  },
  {
    path: '/search',
    component: SearchResults,
    props: route => ({ // 自定義 props 函數(shù)
      query: route.query.q,
      page: parseInt(route.query.page) || 1,
      sort: route.query.sort || 'relevance'
    })
  }
]

// 組件中使用
export default {
  props: {
    // 從路由 params 自動(dòng)注入
    id: {
      type: [String, Number],
      required: true
    },
    // 從自定義 props 函數(shù)注入
    query: String,
    page: Number,
    sort: String
  },
  
  watch: {
    // props 變化時(shí)響應(yīng)
    id(newId) {
      this.loadUser(newId)
    },
    query(newQuery) {
      this.performSearch(newQuery)
    }
  },
  
  created() {
    // 直接使用 props，無(wú)需訪問(wèn) $route
    console.log('用戶ID:', this.id)
    console.log('搜索詞:', this.query)
  }
}

// store/modules/route.js (Vuex)
const state = {
  currentRoute: null,
  previousRoute: null
}

const mutations = {
  SET_CURRENT_ROUTE(state, route) {
    state.previousRoute = state.currentRoute
    state.currentRoute = {
      path: route.path,
      name: route.name,
      params: { ...route.params },
      query: { ...route.query },
      meta: { ...route.meta }
    }
  }
}

// 在全局守衛(wèi)中同步
router.afterEach((to, from) => {
  store.commit('SET_CURRENT_ROUTE', to)
})

// 組件中使用
export default {
  computed: {
    ...mapState({
      currentRoute: state => state.route.currentRoute,
      previousRoute: state => state.route.previousRoute
    }),
    
    // 基于路由狀態(tài)的衍生數(shù)據(jù)
    pageTitle() {
      const route = this.currentRoute
      return route?.meta?.title || '默認(rèn)標(biāo)題'
    }
  }
}

// Pinia 版本（Vue 3）
import { defineStore } from 'pinia'

export const useRouteStore = defineStore('route', {
  state: () => ({
    current: null,
    history: []
  }),
  
  actions: {
    updateRoute(route) {
      this.history.push({
        ...this.current,
        timestamp: new Date().toISOString()
      })
      
      // 只保留最近10條記錄
      if (this.history.length > 10) {
        this.history = this.history.slice(-10)
      }
      
      this.current = {
        path: route.path,
        fullPath: route.fullPath,
        name: route.name,
        params: { ...route.params },
        query: { ...route.query },
        meta: { ...route.meta }
      }
    }
  },
  
  getters: {
    // 獲取路由參數(shù)
    routeParam: (state) => (key) => {
      return state.current?.params?.[key]
    },
    
    // 獲取查詢參數(shù)
    routeQuery: (state) => (key) => {
      return state.current?.query?.[key]
    },
    
    // 檢查是否在特定路由
    isRoute: (state) => (routeName) => {
      return state.current?.name === routeName
    }
  }
})

// 自定義混合（Vue 2）
export const routeMixin = {
  computed: {
    // 便捷訪問(wèn)器
    $routeParams() {
      return this.$route.params || {}
    },
    
    $routeQuery() {
      return this.$route.query || {}
    },
    
    $routeMeta() {
      return this.$route.meta || {}
    },
    
    // 常用路由檢查
    $isHomePage() {
      return this.$route.path === '/'
    },
    
    $hasRouteParam(param) {
      return param in this.$route.params
    },
    
    $getRouteParam(param, defaultValue = null) {
      return this.$route.params[param] || defaultValue
    }
  },
  
  methods: {
    // 路由操作輔助方法
    $updateQuery(newQuery) {
      this.$router.push({
        ...this.$route,
        query: {
          ...this.$route.query,
          ...newQuery
        }
      })
    },
    
    $removeQueryParam(key) {
      const query = { ...this.$route.query }
      delete query[key]
      this.$router.push({ query })
    }
  }
}

// 在組件中使用
export default {
  mixins: [routeMixin],
  
  created() {
    console.log('用戶ID:', this.$getRouteParam('id', 'default'))
    console.log('是否首頁(yè):', this.$isHomePage)
    
    // 更新查詢參數(shù)
    this.$updateQuery({ page: 2, sort: 'name' })
  }
}

// Vue 3 Composition API 版本
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useRouteHelpers() {
  const route = useRoute()
  const router = useRouter()
  
  const routeParams = computed(() => route.params || {})
  const routeQuery = computed(() => route.query || {})
  const routeMeta = computed(() => route.meta || {})
  
  const isHomePage = computed(() => route.path === '/')
  
  function getRouteParam(param, defaultValue = null) {
    return route.params[param] || defaultValue
  }
  
  function updateQuery(newQuery) {
    router.push({
      ...route,
      query: {
        ...route.query,
        ...newQuery
      }
    })
  }
  
  function removeQueryParam(key) {
    const query = { ...route.query }
    delete query[key]
    router.push({ query })
  }
  
  return {
    routeParams,
    routeQuery,
    routeMeta,
    isHomePage,
    getRouteParam,
    updateQuery,
    removeQueryParam
  }
}

// 在組件中使用
<script setup>
const {
  routeParams,
  routeQuery,
  getRouteParam,
  updateQuery
} = useRouteHelpers()

const userId = getRouteParam('id')
const currentTab = computed(() => routeQuery.tab || 'info')

function changeTab(tab) {
  updateQuery({ tab })
}
</script>

export default {
  methods: {
    // 獲取所有路由配置
    getAllRoutes() {
      return this.$router.options.routes
    },
    
    // 通過(guò)名稱查找路由
    findRouteByName(name) {
      return this.$router.options.routes.find(route => route.name === name)
    },
    
    // 檢查路徑是否匹配路由
    matchRoute(path) {
      // Vue Router 3
      const matched = this.$router.match(path)
      return matched.matched.length > 0
      
      // Vue Router 4
      // const matched = this.$router.resolve(path)
      // return matched.matched.length > 0
    },
    
    // 生成路徑
    generatePath(routeName, params = {}) {
      const route = this.findRouteByName(routeName)
      if (!route) return null
      
      // 簡(jiǎn)單的路徑生成（實(shí)際項(xiàng)目建議使用 path-to-regexp）
      let path = route.path
      Object.keys(params).forEach(key => {
        path = path.replace(`:${key}`, params[key])
      })
      return path
    }
  }
}

// ? 避免在模板中頻繁訪問(wèn)深層屬性
<template>
  <div>
    <!-- 每次渲染都會(huì)計(jì)算 -->
    {{ $route.params.user.details.profile.name }}
  </div>
</template>

// ? 使用計(jì)算屬性緩存
<template>
  <div>{{ userName }}</div>
</template>

<script>
export default {
  computed: {
    userName() {
      return this.$route.params.user?.details?.profile?.name || '未知'
    },
    
    // 批量提取路由信息
    routeInfo() {
      const { params, query, meta } = this.$route
      return {
        userId: params.id,
        tab: query.tab,
        requiresAuth: meta.requiresAuth
      }
    }
  }
}
</script>

export default {
  watch: {
    // 監(jiān)聽特定參數(shù)變化
    '$route.params.id': {
      handler(newId, oldId) {
        if (newId !== oldId) {
          this.loadUserData(newId)
        }
      },
      immediate: true
    },
    
    // 監(jiān)聽查詢參數(shù)變化
    '$route.query': {
      handler(newQuery) {
        this.applyFilters(newQuery)
      },
      deep: true // 深度監(jiān)聽對(duì)象變化
    }
  },
  
  // 或者使用 beforeRouteUpdate 守衛(wèi)
  beforeRouteUpdate(to, from, next) {
    // 只處理需要的變化
    if (to.params.id !== from.params.id) {
      this.loadUserData(to.params.id)
    }
    next()
  }
}

<template>
  <div class="user-management">
    <!-- 面包屑導(dǎo)航 -->
    <nav class="breadcrumbs">
      <router-link v-for="item in breadcrumbs" 
                   :key="item.path"
                   :to="item.path">
        {{ item.title }}
      </router-link>
    </nav>
    
    <!-- 用戶詳情 -->
    <div v-if="$route.name === 'user-detail'">
      <h2>用戶詳情 - {{ userName }}</h2>
      <UserTabs :active-tab="activeTab" @change-tab="changeTab" />
      <router-view />
    </div>
    
    <!-- 用戶列表 -->
    <div v-else-if="$route.name === 'user-list'">
      <UserList :filters="routeFilters" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['currentUser']),
    
    // 從路由獲取信息
    userId() {
      return this.$route.params.userId
    },
    
    activeTab() {
      return this.$route.query.tab || 'profile'
    },
    
    routeFilters() {
      return {
        department: this.$route.query.dept,
        role: this.$route.query.role,
        status: this.$route.query.status || 'active'
      }
    },
    
    // 面包屑導(dǎo)航
    breadcrumbs() {
      const crumbs = []
      const { matched } = this.$route
      
      matched.forEach((route, index) => {
        const { meta, path } = route
        
        // 生成面包屑項(xiàng)
        if (meta?.breadcrumb) {
          crumbs.push({
            title: meta.breadcrumb,
            path: this.generateBreadcrumbPath(matched.slice(0, index + 1))
          })
        }
      })
      
      return crumbs
    },
    
    // 用戶名（需要根據(jù)ID查找）
    userName() {
      const user = this.$store.getters.getUserById(this.userId)
      return user ? user.name : '加載中...'
    }
  },
  
  watch: {
    // 監(jiān)聽用戶ID變化
    userId(newId) {
      if (newId) {
        this.$store.dispatch('fetchUser', newId)
      }
    },
    
    // 監(jiān)聽標(biāo)簽頁(yè)變化
    activeTab(newTab) {
      this.updateDocumentTitle(newTab)
    }
  },
  
  created() {
    // 初始化加載
    if (this.userId) {
      this.$store.dispatch('fetchUser', this.userId)
    }
    
    // 設(shè)置頁(yè)面標(biāo)題
    this.updateDocumentTitle()
    
    // 記錄頁(yè)面訪問(wèn)
    this.logPageView()
  },
  
  methods: {
    changeTab(tab) {
      // 更新查詢參數(shù)
      this.$router.push({
        ...this.$route,
        query: { ...this.$route.query, tab }
      })
    },
    
    generateBreadcrumbPath(routes) {
      // 生成完整路徑
      return routes.map(r => r.path).join('')
    },
    
    updateDocumentTitle(tab = null) {
      const tabName = tab || this.activeTab
      const title = this.$route.meta.title || '用戶管理'
      document.title = `${title} - ${this.getTabDisplayName(tabName)}`
    },
    
    logPageView() {
      // 發(fā)送分析數(shù)據(jù)
      analytics.track('page_view', {
        path: this.$route.path,
        name: this.$route.name,
        params: this.$route.params
      })
    }
  }
}
</script>

// ? 可能在 created 中獲取不到完整的 $route
created() {
  console.log(this.$route.params.id) // 可能為 undefined
}

// ? 使用 nextTick 確保 DOM 和路由都就緒
created() {
  this.$nextTick(() => {
    console.log('路由信息:', this.$route)
    this.loadData(this.$route.params.id)
  })
}

// ? 或者使用 watch + immediate
watch: {
  '$route.params.id': {
    handler(id) {
      if (id) this.loadData(id)
    },
    immediate: true
  }
}

// 對(duì)于復(fù)用組件，需要監(jiān)聽路由變化
export default {
  // 使用 beforeRouteUpdate 守衛(wèi)
  beforeRouteUpdate(to, from, next) {
    this.userId = to.params.id
    this.loadUserData()
    next()
  },
  
  // 或者使用 watch
  watch: {
    '$route.params.id'(newId) {
      this.userId = newId
      this.loadUserData()
    }
  }
}

// Vue 3 + TypeScript
import { RouteLocationNormalized } from 'vue-router'

// 定義路由參數(shù)類型
interface UserRouteParams {
  id: string
}

interface UserRouteQuery {
  tab?: 'info' | 'posts' | 'settings'
  edit?: string
}

export default defineComponent({
  setup() {
    const route = useRoute()
    
    // 類型安全的參數(shù)訪問(wèn)
    const userId = computed(() => {
      const params = route.params as UserRouteParams
      return params.id
    })
    
    const currentTab = computed(() => {
      const query = route.query as UserRouteQuery
      return query.tab || 'info'
    })
    
    // 類型安全的路由跳轉(zhuǎn)
    const router = useRouter()
    function goToEdit() {
      router.push({
        name: 'user-edit',
        params: { id: userId.value },
        query: { from: route.fullPath }
      })
    }
    
    return { userId, currentTab, goToEdit }
  }
})

graph TD
    A[需要獲取路由信息] --> B{使用場(chǎng)景}
    
    B -->|簡(jiǎn)單訪問(wèn)參數(shù)| C[使用 $route.params]
    B -->|Vue 3 項(xiàng)目| D[使用 useRoute Hook]
    B -->|組件需要復(fù)用/測(cè)試| E[使用 Props 傳遞]
    B -->|多個(gè)組件共享狀態(tài)| F[使用 Pinia/Vuex 存儲(chǔ)]
    B -->|通用工具函數(shù)| G[自定義組合函數(shù)]
    
    C --> H[完成]
    D --> H
    E --> H
    F --> H
    G --> H