START_LOCATION - 起始位置常量

START_LOCATION 是一个特殊的路由位置常量，表示 Vue Router 应用的初始导航起始位置。它用于标识应用启动时的默认路由状态。🚀

📋 变量定义

const START_LOCATION: RouteLocationNormalized

🎯 功能说明

这个常量代表了 Vue Router 导航系统的起点：

1. 初始状态标识 - 表示应用加载完成后的初始路由位置
2. 导航比较基准 - 用于检测是否为首次导航或回退到初始状态
3. 特殊路由值 - 具有特定的路径和属性标识起始状态

🔧 技术细节

常量定义

// START_LOCATION 的完整定义
const START_LOCATION: RouteLocationNormalized = {
  path: '/',
  fullPath: '/',
  query: {},
  hash: '',
  params: {},
  matched: [],
  meta: {},
  redirectedFrom: undefined,
  name: undefined
}

特殊属性

• path: '/' - 根路径标识
• matched: [] - 空数组表示未匹配任何路由
• 所有参数为空 - 表示初始的干净状态

💡 实际应用示例

检测首次导航

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

const route = useRoute()
const isFirstNavigation = ref(true)

// 监听路由变化，检测是否为首次导航
watch(route, (newRoute, oldRoute) => {
  if (oldRoute === START_LOCATION) {
    isFirstNavigation.value = false
    console.log('首次导航完成:', newRoute.path)
  }
}, { immediate: true })
</script>

<template>
  <div class="app-container">
    <!-- 首次导航加载指示器 -->
    <div v-if="isFirstNavigation" class="first-loading">
      <p>应用初始化中...</p>
    </div>
    
    <!-- 正常应用内容 -->
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

导航历史追踪

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

const route = useRoute()
const navigationHistory = ref([])

// 追踪导航历史（排除起始位置）
watch(route, (newRoute, oldRoute) => {
  // 忽略从起始位置到起始位置的"导航"
  if (oldRoute === START_LOCATION && newRoute === START_LOCATION) {
    return
  }
  
  // 记录导航历史
  const navigationRecord = {
    timestamp: new Date().toISOString(),
    from: oldRoute === START_LOCATION ? '应用启动' : oldRoute.path,
    to: newRoute.path,
    isInitial: oldRoute === START_LOCATION
  }
  
  navigationHistory.value.push(navigationRecord)
  
  // 保持最近50条记录
  if (navigationHistory.value.length > 50) {
    navigationHistory.value.shift()
  }
}, { immediate: true })
</script>

<template>
  <div class="navigation-tracker">
    <h4>导航历史</h4>
    <div 
      v-for="(record, index) in navigationHistory" 
      :key="index"
      class="navigation-record"
      :class="{ initial: record.isInitial }"
    >
      <span class="time">{{ record.timestamp.split('T')[1].split('.')[0] }}</span>
      <span class="from">{{ record.from }}</span>
      <span class="to">{{ record.to }}</span>
    </div>
  </div>
</template>

应用初始化逻辑

import { START_LOCATION } from 'vue-router'

// 应用启动时的初始化逻辑
router.beforeEach((to, from) => {
  // 检测是否为应用启动后的首次导航
  if (from === START_LOCATION) {
    console.log('应用启动，开始首次导航:', to.path)
    
    // 执行应用启动逻辑
    initializeApp()
    
    // 记录启动时间
    performance.mark('app-first-navigation')
  }
  
  return true
})

// 应用初始化函数
function initializeApp() {
  // 预加载关键数据
  preloadCriticalData()
  
  // 设置全局状态
  setupGlobalState()
  
  // 初始化第三方服务
  initializeThirdPartyServices()
}

🔗 相关变量

• routeLocationKey - 路由位置注入键
• routerKey - 路由实例注入键

💡 专业建议：START_LOCATION 主要用于高级导航控制和调试场景。在大多数应用中，你不需要直接使用这个常量，但它对于理解 Vue Router 的导航机制非常有帮助。