开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
Vue Router 中
$route 和 $router 是两个容易混淆但核心作用完全不同的对象，我会用通俗易懂的方式帮你区分它们。一、核心区别（通俗理解）
可以把这两个对象类比成导航系统：
$router：相当于整个导航系统的总控台（路由器实例），负责全局的路由跳转、配置管理等操作。$route：相当于当前正在行驶的路线信息（当前路由对象），只包含当前页面的路由相关数据。
二、详细说明 + 代码示例
1. $router（路由器实例）
- 作用：是 Vue Router 的核心实例，包含了路由的全局配置、跳转方法（
push/replace/go）、路由模式等，用于主动控制路由跳转。 - 常用方法：
$router.push('/home')：跳转到指定路由（会新增历史记录）。$router.replace('/home')：跳转到指定路由（替换当前历史记录，无返回）。$router.go(-1)：回退到上一页（类似浏览器后退）。$router.back()：等价于go(-1)，后退。
代码示例：
vue
<template>
<button @click="goToHome">跳转到首页</button>
</template>
<script>
export default {
methods: {
goToHome() {
// 使用 $router 进行路由跳转（核心操作）
this.$router.push('/home');
// 也可以传对象形式
// this.$router.push({ path: '/home', query: { id: 1 } });
}
}
};
</script>
2. $route（当前路由对象）
- 作用：表示当前激活的路由信息，包含当前页面的路径、参数、查询参数、路由元信息等，只读不可修改。
- 常用属性：
$route.path：当前路由的路径（如/home）。$route.params：路由动态参数（如/user/:id中的id）。$route.query：URL 查询参数（如/home?name=vue中的{ name: 'vue' }）。$route.meta：路由元信息（自定义的路由附加数据）。$route.name：当前路由的名称（如果配置了name）。
代码示例：
vue
<template>
<div>
<!-- 展示当前路由的信息 -->
<p>当前路径：{{ $route.path }}</p>
<p>路由参数 id：{{ $route.params.id }}</p>
<p>查询参数 name：{{ $route.query.name }}</p>
</div>
</template>
<script>
export default {
mounted() {
// 打印当前路由的完整信息
console.log(this.$route);
}
};
</script>
三、关键对比表
表格
| 特性 | $router |
$route |
|---|---|---|
| 本质 | 路由实例（总控） | 当前路由对象（信息） |
| 核心功能 | 路由跳转、全局配置 | 获取当前路由数据 |
| 是否可修改 | 可调用方法（如 push） | 只读（修改无意义） |
| 作用域 | 全局（所有路由通用） | 仅当前激活的路由 |
总结
$router是操作层，负责路由跳转（push/replace等），是全局的路由器实例；$route是数据层，仅存储当前页面的路由信息（路径、参数等），只读且与当前路由绑定；- 记忆口诀：
$router管 “跳转”，$route管 “信息”。
