Vue3路由攻略：routes与route详解

Vue 3 中 routes 与 route 的区别

routes 是路由配置的集合，通常用于定义应用的所有路由规则。它是一个数组，每个元素描述一个路由路径（path）与对应组件（component）的映射关系。

route 是当前激活的路由对象，包含当前 URL 解析得到的信息（如路径、参数、查询参数等）。它是一个响应式对象，会随着路由变化自动更新。

routes 的配置示例

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

• path：字符串，匹配浏览器地址栏的路径。
• name：可选，唯一标识路由的名称。
• component：直接引入组件或动态导入（懒加载）。

route 的核心属性

{
  path: '/user/123',
  params: { id: '123' },
  query: { search: 'vue' },
  hash: '#profile',
  fullPath: '/user/123?search=vue#profile',
  matched: [...] // 匹配的路由配置记录
}

• params：动态路由参数（如 /user/:id 中的 id）。
• query：URL 查询参数（如 ?search=vue）。
• hash：URL 哈希值（如 #profile）。
• matched：当前路由匹配的所有嵌套路由配置。

获取 route 的方式

在组件模板中通过 $route 访问：

<template>
  <div>当前路径：{{ $route.path }}</div>
</template>

在 <script setup> 中使用组合式 API：

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)

动态路由匹配

在 routes 中定义参数：

{
  path: '/user/:id',
  component: User
}

通过 route.params 获取：

// 访问 /user/123 时
route.params.id // '123'

导航守卫中的 route

在守卫中可访问目标路由对象（to）和当前路由对象（from）：

router.beforeEach((to, from) => {
  if (to.params.id === 'admin') {
    return '/login'
  }
})