1. 核心区别

特性 routes route
类型 数组 (Array) 对象 (Object)
作用 定义路由规则 (路由表) 访问当前激活的路由信息
使用场景 路由配置 (router/index.js) 组件内部访问当前路由
响应式 否 (静态配置) 是 (可监听变化)
数据内容 路径、组件、子路由等配置信息 路径、参数、查询字符串等运行时信息

2. API 详解

routes (路由配置)

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [  //  👈 定义路由表数组
  {
    path: '/user/:id',
    name: 'user-profile',
    component: () => import('./views/User.vue'),
    props: true, // 将 params 转为 props
    children: [   // 嵌套路由
      { path: 'posts', component: () => import('./components/Posts.vue') }
    ]
  },
  { 
    path: '/about', 
    redirect: { name: 'home' } // 重定向
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes //  👈 传入路由配置
})

route (当前路由对象)

<!-- 组件内使用 -->
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute() //  👈 获取当前路由对象

// 监听路由变化
watch(
  () => route.params.id,
  (newId) => {
    console.log('ID changed to:', newId)
  }
)
</script>

<template>
  <div>
    <!-- 访问路由属性 -->
    <p>当前路径: {{ route.path }}</p>
    <p>用户ID: {{ route.params.id }}</p>
    <p>查询参数: {{ route.query.page }}</p>
  </div>
</template>

route 关键属性：

属性 说明 示例
path 当前路径 (不含查询参数) /user/123
fullPath 完整路径 (含查询参数和 hash) /user/123?page=2#section
params 动态路径参数对象 { id: '123' }
query URL 查询参数对象 { page: '2' }
hash URL 的 hash 部分 #section
name 路由名称 (如有定义) 'user-profile'
matched 匹配的路由记录数组 嵌套路由层级信息
meta 路由元信息 { requiresAuth: true }

3. 使用场景对比

操作 routes 的用法 route 的用法
获取路由参数 ❌ 无法直接获取 ✅ route.params.id
定义新路由 ✅ router.addRoute({ path: ... }) ❌ 只读属性
访问查询字符串 ❌ 配置阶段无此信息 ✅ route.query.page
路由重定向 ✅ { path: '/old', redirect: '/' } ❌ 只读
监听路由变化 ❌ 静态配置 ✅ watch(() => route.path, ...)

4. 总结图表

关键结论

  1. routes 是路由配置表，在创建路由实例时定义，描述所有可能的路径与组件的映射关系。

  2. route 是当前路由状态对象，在组件内通过 useRoute() 获取，包含 URL 解析后的实时信息。

  3. 动态路由参数（如 :id）通过 route.params 访问，查询参数通过 route.query 访问。

  4. 使用 watch 监听 route 对象属性可实现基于路由的逻辑响应。

# vue.js # javascript # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区