RouteLocationPathRaw - 路径路由位置原始接口

RouteLocationPathRaw 接口定义了使用路径字符串进行路由导航时的参数结构。它提供了最直接的路由跳转方式，通过具体的路径字符串来指定目标路由。🛣️

📋 接口定义

typescript

interface RouteLocationPathRaw {
  path: string
  query?: LocationQueryRaw
  hash?: string
  replace?: boolean
  force?: boolean
  state?: HistoryState
}

🎯 功能说明

这个接口专门用于基于路径的路由导航，具有以下特点：

直观简单 - 直接使用路径字符串，易于理解
灵活性高 - 可以导航到任何有效的路径
动态路径支持 - 适合动态生成路径的场景
外部链接兼容 - 可以处理外部URL或相对路径

🔧 属性详解

path - 目标路径

类型	必填	说明
`string`	✅	要导航到的目标路径字符串

示例：

javascript

{ path: '/user/123/profile' } // 绝对路径
{ path: 'settings' }          // 相对路径
{ path: '../parent' }         // 上级路径

query - 查询参数

类型	必填	说明
`LocationQueryRaw`	❌	URL 查询字符串参数

示例：

javascript

{ 
  path: '/search',
  query: { q: 'vue', page: 1 } // ?q=vue&page=1
}

hash - 哈希片段

类型	必填	说明
`string`	❌	URL 的哈希部分（不带 #）

示例：

javascript

{ 
  path: '/documentation',
  hash: 'installation' // #installation
}

replace - 替换模式

类型	必填	说明
`boolean`	❌	是否替换当前历史记录（默认 false）

示例：

javascript

{ 
  path: '/login',
  replace: true // 不添加新历史记录
}

force - 强制导航

类型	必填	说明
`boolean`	❌	即使目标路由相同也强制导航

示例：

javascript

{ 
  path: '/current-path',
  force: true // 强制刷新当前路由
}

state - 历史状态

类型	必填	说明
`HistoryState`	❌	附加到历史记录的状态数据

示例：

javascript

{ 
  path: '/checkout',
  state: { from: 'cart', timestamp: Date.now() }
}

💡 实际应用示例

基础路径导航

javascript

import { useRouter } from 'vue-router'

const router = useRouter()

// 导航到绝对路径
router.push({ path: '/home' })

// 导航到相对路径
router.push({ path: 'profile' }) // 相对于当前路径

// 带参数的路径导航
router.push({ 
  path: '/user/123', 
  query: { tab: 'info' } 
})

在组件模板中使用

vue

<template>
  <!-- 使用路径的 RouterLink -->
  <RouterLink to="/home">
    首页
  </RouterLink>
  
  <!-- 带查询参数的路径导航 -->
  <RouterLink 
    :to="{ 
      path: '/search', 
      query: { q: 'vue router' } 
    }"
  >
    搜索 Vue Router
  </RouterLink>
  
  <!-- 相对路径导航 -->
  <RouterLink :to="{ path: '../parent' }">
    返回上级
  </RouterLink>
</template>

动态路径生成

javascript

// 根据用户输入动态生成路径
function navigateToDynamicPath(userInput) {
  const router = useRouter()
  
  // 清理和验证用户输入
  const cleanPath = sanitizePath(userInput)
  
  // 导航到动态生成的路径
  router.push({ 
    path: `/custom/${cleanPath}`,
    query: { source: 'user-input' }
  })
}

// 路径参数处理
function navigateWithParams(basePath, dynamicParams) {
  const router = useRouter()
  
  // 构建带参数的路径
  const pathWithParams = Object.entries(dynamicParams)
    .reduce((path, [key, value]) => 
      path.replace(`:${key}`, encodeURIComponent(value)), 
      basePath
    )
  
  router.push({ path: pathWithParams })
}

🎯 使用场景

外部链接和重定向

javascript

// 处理外部链接导航
function handleExternalNavigation(url) {
  const router = useRouter()
  
  // 检查是否是内部路径
  if (url.startsWith('/')) {
    // 内部路径导航
    router.push({ path: url })
  } else {
    // 外部链接，新窗口打开
    window.open(url, '_blank')
  }
}

// 重定向处理
function handleRedirect(targetPath, options = {}) {
  const router = useRouter()
  
  return router.push({
    path: targetPath,
    replace: options.replace || false,
    query: options.query,
    hash: options.hash
  })
}

路径操作工具函数

javascript

// 路径拼接工具
function buildPath(basePath, ...segments) {
  return segments.reduce((path, segment) => {
    // 确保路径分隔符正确
    const cleanSegment = segment.replace(/^\/+|\/+$/g, '')
    return path + (path.endsWith('/') ? '' : '/') + cleanSegment
  }, basePath.replace(/\/+$/, ''))
}

// 使用示例
const fullPath = buildPath('/api', 'v1', 'users', '123')
// 输出: /api/v1/users/123

路径解析和验证

javascript

// 路径验证函数
function isValidPath(path) {
  // 基本路径格式验证
  if (typeof path !== 'string') return false
  if (path.length === 0) return false
  
  // 检查路径格式
  const pathRegex = /^(\/[a-zA-Z0-9_-]+)*\/?$/
  return pathRegex.test(path) || path === '/'
}

// 路径标准化
function normalizePath(path) {
  if (!path || path === '/') return '/'
  
  // 移除开头和结尾的斜杠，然后添加开头斜杠
  const cleanPath = path.replace(/^\/+|\/+$/g, '')
  return cleanPath ? `/${cleanPath}` : '/'
}

// 使用示例
const normalized = normalizePath('//user/123//')
// 输出: /user/123

🔧 高级用法

路径模式匹配

javascript

// 检查路径是否匹配特定模式
function matchPathPattern(path, pattern) {
  const patternRegex = new RegExp(
    pattern.replace(/:\w+/g, '([^/]+)')
  )
  return patternRegex.test(path)
}

// 提取路径参数
function extractPathParams(path, pattern) {
  const paramNames = []
  const patternRegex = new RegExp(
    pattern.replace(/:(\w+)/g, (_, name) => {
      paramNames.push(name)
      return '([^/]+)'
    })
  )
  
  const match = path.match(patternRegex)
  if (!match) return null
  
  const params = {}
  paramNames.forEach((name, index) => {
    params[name] = match[index + 1]
  })
  
  return params
}

// 使用示例
const params = extractPathParams('/user/123/profile', '/user/:id/:page')
// 输出: { id: '123', page: 'profile' }

路径历史追踪

javascript

// 路径导航历史记录
class PathNavigationHistory {
  constructor() {
    this.history = []
  }
  
  recordNavigation(fromPath, toPath, options = {}) {
    this.history.push({
      from: fromPath,
      to: toPath,
      timestamp: Date.now(),
      options,
      type: options.replace ? 'replace' : 'push'
    })
    
    // 保持历史记录大小
    if (this.history.length > 100) {
      this.history.shift()
    }
  }
  
  getRecentNavigations(limit = 10) {
    return this.history.slice(-limit)
  }
  
  findNavigationByPath(path) {
    return this.history.filter(item => 
      item.to === path || item.from === path
    )
  }
}

// 使用示例
const navHistory = new PathNavigationHistory()

// 在导航守卫中记录
router.beforeEach((to, from) => {
  navHistory.recordNavigation(from.path, to.path)
})

🚨 注意事项

路径编码和安全

javascript

// 安全的路径处理
function safePathNavigation(path, userInput) {
  // 编码用户输入以防止路径遍历攻击
  const encodedInput = encodeURIComponent(userInput)
    .replace(/%2F/g, '') // 移除编码后的斜杠
  
  // 构建安全路径
  const safePath = `${path}/${encodedInput}`
  
  // 验证路径安全性
  if (isPathTraversalSafe(safePath)) {
    return router.push({ path: safePath })
  } else {
    throw new Error('不安全的路径导航尝试')
  }
}

// 路径遍历安全检查
function isPathTraversalSafe(path) {
  const normalized = path.replace(/\/+/g, '/')
  return !normalized.includes('../') && 
         !normalized.includes('..\\') &&
         normalized.startsWith('/')
}

性能考虑

javascript

// 避免频繁的路径导航
const navigationThrottle = new Map()

function throttledPathNavigation(path, options = {}) {
  const key = `${path}-${JSON.stringify(options)}`
  const now = Date.now()
  
  // 检查是否在节流期内
  if (navigationThrottle.has(key)) {
    const lastTime = navigationThrottle.get(key)
    if (now - lastTime < 1000) { // 1秒内不重复导航
      return Promise.resolve()
    }
  }
  
  navigationThrottle.set(key, now)
  
  // 执行导航
  return router.push({ path, ...options })
}

🔗 相关接口

RouteLocationRaw - 路由位置原始类型
RouteLocationNamedRaw - 命名路由位置原始接口

💡 专业建议：对于简单的导航需求，使用路径导航非常方便。但对于大型项目，考虑使用命名路由以获得更好的类型安全和重构友好性。

RouteLocationPathRaw - 路径路由位置原始接口 ​

📋 接口定义 ​

🎯 功能说明 ​

🔧 属性详解 ​

path - 目标路径 ​

query - 查询参数 ​

hash - 哈希片段 ​

replace - 替换模式 ​

force - 强制导航 ​

state - 历史状态 ​

💡 实际应用示例 ​

基础路径导航 ​

在组件模板中使用 ​

动态路径生成 ​

🎯 使用场景 ​

外部链接和重定向 ​

路径操作工具函数 ​

路径解析和验证 ​

🔧 高级用法 ​

路径模式匹配 ​

路径历史追踪 ​

🚨 注意事项 ​

路径编码和安全 ​

性能考虑 ​

🔗 相关接口 ​

RouteLocationPathRaw - 路径路由位置原始接口

📋 接口定义

🎯 功能说明

🔧 属性详解

path - 目标路径

query - 查询参数

hash - 哈希片段

replace - 替换模式

force - 强制导航

state - 历史状态

💡 实际应用示例

基础路径导航

在组件模板中使用

动态路径生成

🎯 使用场景

外部链接和重定向

路径操作工具函数

路径解析和验证

🔧 高级用法

路径模式匹配

路径历史追踪

🚨 注意事项

路径编码和安全

性能考虑

🔗 相关接口