Vue Router

简体中文

English

简体中文

English

Appearance

routerViewLocationKey - 路由视图位置键 ​

routerViewLocationKey 是一个Symbol类型的常量，用于在 Vue Router 的嵌套路由系统中标识当前路由视图的位置信息。它主要用于高级路由视图配置和自定义路由组件开发。👁️

📋 变量定义 ​

typescript
const routerViewLocationKey: InjectionKey<RouteLocationNormalizedLoaded>

🎯 功能说明 ​

这个变量提供了对当前路由视图位置的访问能力：

  1. 视图级路由信息 - 包含特定路由视图的当前位置数据
  2. 嵌套路由支持 - 在嵌套路由场景中提供正确的视图级信息
  3. 高级用途 - 主要用于自定义路由视图组件和高级路由功能

🔧 技术细节 ​

类型定义 ​

typescript
// routerViewLocationKey 的完整类型
const routerViewLocationKey: InjectionKey<RouteLocationNormalizedLoaded>

// 对应的注入值类型
interface RouteLocationNormalizedLoaded extends RouteLocationNormalized {
  // 包含所有基础路由位置信息，但针对特定视图进行了优化
}

在 Vue Router 中的使用 ​

typescript
// Vue Router 的 RouterView 组件内部使用
export const RouterView = defineComponent({
  name: 'RouterView',
  
  setup(props, { slots }) {
    // 注入视图级路由位置信息
    const injectedRoute = inject(routerViewLocationKey)!
    
    return () => {
      // 使用注入的路由信息渲染对应组件
      return slots.default?.() || null
    }
  }
})

💡 实际应用示例 ​

自定义路由视图组件 ​

vue
<script setup>
import { routerViewLocationKey } from 'vue-router'
import { inject, computed } from 'vue'

// 注入当前路由视图的位置信息
const viewLocation = inject(routerViewLocationKey)

// 计算视图特定的路由信息
const viewInfo = computed(() => ({
  viewPath: viewLocation?.path,
  viewName: viewLocation?.name,
  viewParams: viewLocation?.params || {},
  viewQuery: viewLocation?.query || {},
  
  // 检查是否为活动视图
  isActive: viewLocation?.matched.some(record => 
    record.components?.default !== undefined
  ),
  
  // 获取视图的元数据
  viewMeta: viewLocation?.meta || {}
}))

// 视图级权限检查
const hasViewPermission = computed(() => {
  const requiredPermission = viewLocation?.meta?.viewPermission
  return !requiredPermission || checkPermission(requiredPermission)
})
</script>

<template>
  <div 
    class="custom-router-view" 
    :class="{ 'active-view': viewInfo.isActive }"
  >
    <!-- 视图级加载状态 -->
    <div v-if="!hasViewPermission" class="permission-denied">
      <h3>视图访问被拒绝</h3>
      <p>您没有访问此视图的权限。</p>
    </div>
    
    <!-- 默认插槽内容 -->
    <div v-else class="view-content">
      <slot />
    </div>
    
    <!-- 视图调试信息（开发环境） -->
    <div v-if="process.env.NODE_ENV === 'development'" class="view-debug">
      <h5>视图调试信息</h5>
      <pre>{{ viewInfo }}</pre>
    </div>
  </div>
</template>

嵌套路由视图包装器 ​

vue
<script setup>
import { routerViewLocationKey } from 'vue-router'
import { inject, computed, provide } from 'vue'

const viewLocation = inject(routerViewLocationKey)

// 为子视图提供增强的路由信息
const enhancedViewLocation = computed(() => ({
  ...viewLocation,
  // 添加自定义视图属性
  viewLevel: calculateViewLevel(viewLocation),
  parentView: getParentViewInfo(viewLocation)
}))

// 提供增强的视图位置给子组件
provide('enhancedViewLocation', enhancedViewLocation)

// 计算视图层级
function calculateViewLevel(location) {
  if (!location?.matched) return 0
  return location.matched.filter(record => 
    record.components?.default !== undefined
  ).length
}

// 获取父视图信息
function getParentViewInfo(location) {
  if (!location?.matched || location.matched.length < 2) return null
  
  const parentRecord = location.matched[location.matched.length - 2]
  return {
    path: parentRecord.path,
    name: parentRecord.name,
    meta: parentRecord.meta
  }
}
</script>

<template>
  <div class="nested-view-wrapper" :data-view-level="enhancedViewLocation.viewLevel">
    <!-- 视图层级指示器 -->
    <div v-if="enhancedViewLocation.viewLevel > 1" class="view-level-indicator">
      嵌套视图层级: {{ enhancedViewLocation.viewLevel }}
    </div>
    
    <!-- 渲染实际的 RouterView -->
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </div>
</template>

路由视图监控组件 ​

vue
<script setup>
import { routerViewLocationKey } from 'vue-router'
import { inject, watch, ref } from 'vue'

const viewLocation = inject(routerViewLocationKey)

// 视图变化历史记录
const viewHistory = ref([])

// 视图性能监控
const viewPerformance = ref({
  loadTimes: [],
  averageLoadTime: 0
})

// 监听视图变化
watch(viewLocation, (newView, oldView) => {
  if (newView && oldView) {
    const changeRecord = {
      timestamp: new Date().toISOString(),
      fromView: oldView.name || oldView.path,
      toView: newView.name || newView.path,
      viewParams: newView.params,
      viewQuery: newView.query
    }
    
    viewHistory.value.push(changeRecord)
    
    // 保持最近20条记录
    if (viewHistory.value.length > 20) {
      viewHistory.value.shift()
    }
    
    // 记录视图加载性能
    const loadTime = performance.now()
    setTimeout(() => {
      const loadDuration = performance.now() - loadTime
      viewPerformance.value.loadTimes.push(loadDuration)
      
      // 计算平均加载时间
      if (viewPerformance.value.loadTimes.length > 10) {
        viewPerformance.value.loadTimes.shift()
      }
      
      viewPerformance.value.averageLoadTime = 
        viewPerformance.value.loadTimes.reduce((a, b) => a + b, 0) / 
        viewPerformance.value.loadTimes.length
    }, 0)
  }
}, { immediate: true })
</script>

<template>
  <div class="view-monitor" v-if="process.env.NODE_ENV === 'development'">
    <details>
      <summary>路由视图监控</summary>
      
      <div class="monitor-stats">
        <p>平均加载时间: {{ viewPerformance.averageLoadTime.toFixed(2) }}ms</p>
        <p>总视图变化: {{ viewHistory.length }}</p>
      </div>
      
      <div class="view-history">
        <h6>最近视图变化</h6>
        <div 
          v-for="(record, index) in viewHistory.slice().reverse()" 
          :key="index"
          class="history-item"
        >
          <span class="time">{{ record.timestamp.split('T')[1].split('.')[0] }}</span>
          <span class="change">{{ record.fromView }} → {{ record.toView }}</span>
        </div>
      </div>
    </details>
  </div>
</template>

🎯 高级使用场景 ​

条件性视图渲染 ​

vue
<script setup>
import { routerViewLocationKey } from 'vue-router'
import { inject, computed } from 'vue'

const viewLocation = inject(routerViewLocationKey)

// 基于视图条件的渲染逻辑
const shouldRenderView = computed(() => {
  // 检查视图级权限
  if (viewLocation?.meta?.requiresAuth && !isAuthenticated()) {
    return false
  }
  
  // 检查维护模式
  if (viewLocation?.meta?.maintenanceMode) {
    return false
  }
  
  // 检查功能开关
  if (viewLocation?.meta?.featureFlag && !isFeatureEnabled(viewLocation.meta.featureFlag)) {
    return false
  }
  
  return true
})

// 备用视图内容
const fallbackContent = computed(() => {
  if (viewLocation?.meta?.maintenanceMode) {
    return {
      component: MaintenanceView,
      props: { message: viewLocation.meta.maintenanceMessage }
    }
  }
  
  if (!isAuthenticated() && viewLocation?.meta?.requiresAuth) {
    return {
      component: LoginPrompt,
      props: { redirectTo: viewLocation.fullPath }
    }
  }
  
  return null
})
</script>

<template>
  <div class="conditional-view">
    <template v-if="shouldRenderView">
      <!-- 正常渲染视图 -->
      <router-view />
    </template>
    
    <template v-else-if="fallbackContent">
      <!-- 渲染备用内容 -->
      <component 
        :is="fallbackContent.component" 
        v-bind="fallbackContent.props" 
      />
    </template>
    
    <template v-else>
      <!-- 默认错误状态 -->
      <div class="view-error">
        <h4>无法渲染视图</h4>
        <p>当前条件不允许渲染此视图。</p>
      </div>
    </template>
  </div>
</template>

视图级动画过渡 ​

vue
<script setup>
import { routerViewLocationKey } from 'vue-router'
import { inject, computed } from 'vue'

const viewLocation = inject(routerViewLocationKey)

// 基于视图信息的动画配置
const transitionConfig = computed(() => {
  const meta = viewLocation?.meta || {}
  
  return {
    name: meta.transition || 'fade',
    mode: meta.transitionMode || 'out-in',
    duration: meta.transitionDuration || 300,
    enterClass: meta.enterClass || 'view-enter',
    leaveClass: meta.leaveClass || 'view-leave'
  }
})

// 视图变化检测
const viewKey = computed(() => {
  // 使用路径和查询参数作为视图的唯一标识
  return `${viewLocation?.path}-${JSON.stringify(viewLocation?.query)}`
})
</script>

<template>
  <transition 
    :name="transitionConfig.name"
    :mode="transitionConfig.mode"
    :css="true"
  >
    <router-view :key="viewKey" />
  </transition>
</template>

🔧 实用工具函数 ​

视图信息工具 ​

typescript
// 提供便捷的视图级路由信息访问
export function useRouterViewLocation() {
  const viewLocation = inject(routerViewLocationKey)
  
  return {
    // 基础视图信息
    viewPath: viewLocation?.path,
    viewFullPath: viewLocation?.fullPath,
    viewName: viewLocation?.name,
    
    // 视图参数
    viewParams: viewLocation?.params || {},
    viewQuery: viewLocation?.query || {},
    viewHash: viewLocation?.hash,
    
    // 视图匹配信息
    matchedViews: viewLocation?.matched || [],
    currentView: viewLocation?.matched[viewLocation.matched.length - 1],
    
    // 便捷方法
    hasViewParam: (key: string) => key in (viewLocation?.params || {}),
    getViewParam: (key: string) => viewLocation?.params?.[key],
    hasViewQuery: (key: string) => key in (viewLocation?.query || {}),
    getViewQuery: (key: string) => viewLocation?.query?.[key],
    
    // 视图级验证
    isCurrentView: (path: string) => viewLocation?.path === path,
    viewMatchesPattern: (pattern: RegExp) => pattern.test(viewLocation?.path || '')
  }
}

🔗 相关变量 ​

💡 专业建议：routerViewLocationKey 主要用于高级场景和自定义路由视图组件开发。在大多数情况下，使用标准的 <router-view> 组件配合 useRoute() 已经足够满足需求。

🚀 Vue Router - 让前端路由变得简单而强大 | 构建现代化单页应用的最佳选择

Copyright © 2025 Vue Router | sitemap