$route 和$router 的区别是什么？

$route vs $router 的区别

对象	说明	常用用途
$route	当前路由对象（"在哪里"）	获取路径、参数、查询、hash 等信息
$router	路由实例对象（"怎么走"）	进行页面跳转（push、replace 等）

$route是状态，$router是行为。

$route（当前路由信息）

这是一个只读对象，包含当前路由的所有信息：

this.$route.path        // 当前路径，例如：'/user/123'
this.$route.params      // 路由参数，例如：{ id: '123' }
this.$route.query       // 查询参数，例如：{ page: '2' }
this.$route.name        // 当前路由名称
this.$route.fullPath    // 完整路径，例如：'/user/123?sort=asc'
this.$route.hash        // URL hash，例如：'#top'

$route 是响应式的，你可以监听它来处理路由变化。

$router（路由控制器）

这是 Vue Router 的实例对象，你用它来跳转路由或操作历史记录：

this.$router.push('/home')                  // 跳转页面
this.$router.replace('/login')              // 替换当前路由（不留历史记录）
this.$router.go(-1)                         // 后退一步
this.$router.push({ name: 'User', params: { id: 123 } })  // 命名路由跳转

示例对比

<template>
  <div>
    <p>当前用户ID：{{ $route.params.id }}</p>
    <button @click="goHome">返回首页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')   // 使用 $router 来跳转
    }
  }
}
</script>

如果你用的是 Vue 3 + Composition API，可以用对应的组合式函数：

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()     // 相当于 this.$route
const router = useRouter()   // 相当于 this.$router