RouteLocationBase - 路由位置基础接口

RouteLocationBase 接口定义了路由位置信息的基础结构，包含了所有路由位置共有的核心属性。它是其他路由位置接口的基础。🏗️

📋 接口定义

interface RouteLocationBase {
  path: string
  name?: RouteRecordName | null | undefined
  params: RouteParams
  query: LocationQuery
  hash: string
  fullPath: string
  matched: RouteRecordNormalized[]
  meta: RouteMeta
  redirectedFrom?: RouteLocation | undefined
}

🎯 功能说明

这个接口就像是路由位置的"身份证信息"，包含了：

1. 路径信息 - 当前路由的路径和参数
2. 查询参数 - URL 查询字符串的解析结果
3. 匹配记录 - 当前激活的路由记录链
4. 元数据 - 路由相关的自定义元信息
5. 重定向来源 - 如果当前路由是重定向结果，记录来源

🔧 属性详解

path - 路径部分

类型	说明
string	当前路由的路径部分（不包含查询参数和哈希）

示例：

// 对于 URL: /user/123?name=john#profile
route.path // '/user/123'

name - 路由名称

类型	说明
RouteRecordName | null | undefined	路由配置中定义的名称

示例：

// 路由配置: { name: 'user', path: '/user/:id' }
route.name // 'user'

params - 路径参数

类型	说明
RouteParams	从动态路径段中提取的参数

示例：

// 路由配置: { path: '/user/:id' }
// 当前路径: /user/123
route.params // { id: '123' }

query - 查询参数

类型	说明
LocationQuery	URL 查询字符串的解析结果

示例：

// URL: /search?q=vue&category=docs
route.query // { q: 'vue', category: 'docs' }

hash - 哈希部分

类型	说明
string	URL 的哈希部分（带 # 符号）

示例：

// URL: /page#section1
route.hash // '#section1'

fullPath - 完整路径

类型	说明
string	包含路径、查询参数和哈希的完整 URL

示例：

// URL: /user/123?name=john#profile
route.fullPath // '/user/123?name=john#profile'

matched - 匹配的路由记录

类型	说明
RouteRecordNormalized[]	当前激活的路由记录数组（包含所有嵌套层级）

示例：

// 嵌套路由配置
route.matched // [父路由记录, 当前路由记录]

meta - 路由元数据

类型	说明
RouteMeta	路由配置中定义的自定义元信息

示例：

// 路由配置: { meta: { requiresAuth: true } }
route.meta // { requiresAuth: true }

redirectedFrom - 重定向来源

类型	说明
RouteLocation | undefined	如果当前路由是重定向结果，记录原始路由位置

示例：

// 从 /old-path 重定向到 /new-path
route.redirectedFrom // { path: '/old-path', ... }

💡 实际应用示例

获取当前路由信息

<template>
  <div>
    <p>当前路径: {{ route.path }}</p>
    <p>完整路径: {{ route.fullPath }}</p>
    <p>查询参数: {{ JSON.stringify(route.query) }}</p>
    <p>路径参数: {{ JSON.stringify(route.params) }}</p>
  </div>
</template>

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

const route = useRoute()
</script>

基于路由参数的逻辑处理

import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

// 基于路径参数的响应式计算
const userId = computed(() => route.params.id)
const isEditing = computed(() => route.params.action === 'edit')

// 基于查询参数的逻辑
const searchQuery = computed(() => route.query.q || '')
const currentPage = computed(() => parseInt(route.query.page) || 1)

路由匹配记录的使用

// 检查当前路由是否匹配特定模式
function isInAdminSection(route) {
  return route.matched.some(record => 
    record.path.startsWith('/admin')
  )
}

// 获取所有匹配路由的元数据
function getAllMeta(route) {
  return route.matched.reduce((meta, record) => ({
    ...meta,
    ...record.meta
  }), {})
}

重定向处理

// 检查是否是重定向结果
if (route.redirectedFrom) {
  console.log('从', route.redirectedFrom.path, '重定向而来')
  
  // 可以记录重定向来源用于分析
  trackRedirect(route.redirectedFrom, route)
}

🎯 高级用法

自定义路由位置工具函数

// 创建路由位置的快照
function createRouteSnapshot(route: RouteLocationBase) {
  return {
    path: route.path,
    params: { ...route.params },
    query: { ...route.query },
    hash: route.hash,
    timestamp: Date.now()
  }
}

// 比较两个路由位置
function areRoutesEqual(
  a: RouteLocationBase, 
  b: RouteLocationBase
): boolean {
  return a.fullPath === b.fullPath
}

路由变化监听和响应

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 监听路径参数变化
watch(
  () => route.params.id,
  (newId, oldId) => {
    if (newId !== oldId) {
      loadUserData(newId)
    }
  }
)

// 监听查询参数变化
watch(
  () => route.query,
  (newQuery, oldQuery) => {
    if (newQuery.search !== oldQuery.search) {
      performSearch(newQuery.search)
    }
  },
  { deep: true }
)

🔗 相关接口

• RouteLocationNormalized - 标准化的路由位置
• RouteLocationNormalizedLoaded - 已加载的路由位置
• RouteParams - 路径参数类型
• LocationQuery - 查询参数类型

💡 专业建议：在组件中访问路由信息时，尽量使用计算属性或监听器来确保响应式更新，避免直接访问可能变化的属性。