前言
在前端开发中，路由是实现单页面应用（SPA）的核心机制之一。然而，很多新手开发者在学习路由时，常常会混淆 route 和 router 的概念。
今天，我们就来深入探讨一下这两个概念的区别，并通过代码示例来加深理解。
一、为什么容易混淆？
route 和 router 都是路由相关的核心概念，但它们的作用和使用场景完全不同。router 是路由的管理者，而 route 是当前激活的路由对象。在实际开发中，如果不理解它们的区别，很容易在代码中出错，甚至在面试中被问到时也答不上来。
二、一句话总结
- •
router（路由器） ：是路由的管理者，负责整个路由的跳转、拦截、传参等操作。 - •
route（路由信息） ：是当前激活的路由对象，存储当前页面的路径、参数、查询参数等信息。
三、代码实战
1. Vue 中的 router 和 route
在 Vue 中，router 是全局路由管理器，而 route 是当前激活的路由对象。以下是一个简单的代码示例：
// 定义路由规则
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', component: User }
];
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes
});
// 在组件中使用 router
export default {
methods: {
goToHome() {
// 使用 router.push() 跳转到首页
this.$router.push('/home');
},
goToUser(id) {
// 使用 router.push() 跳转到用户页面
this.$router.push(`/user/${id}`);
}
}
};
在上述代码中，router 是通过 createRouter 创建的路由管理器，它负责管理所有的路由规则。在组件中，我们通过 this.$router 来调用路由管理器的方法，例如 push、replace 和 go。
而 route 是当前激活的路由对象，可以通过 this.$route 访问。例如：
export default {
created() {
// 获取当前路由信息
console.log(this.$route.path); // 当前路径，例如 "/user/123"
console.log(this.$route.params); // 动态参数，例如 { id: "123" }
console.log(this.$route.query); // 查询参数，例如 ?name=小杨 → { name: "小杨" }
}
};
在上述代码中，this.$route 是当前激活的路由对象，它包含了当前页面的路径、动态参数和查询参数等信息。
2. React 中的类似概念
在 React 中，虽然没有 $router 和 $route，但概念是相通的。React Router 提供了 useNavigate、useLocation 和 useParams 等钩子来实现类似的功能。
import { useNavigate, useLocation, useParams } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate(); // 相当于 this.$router
const location = useLocation(); // 相当于 this.$route
const params = useParams(); // 相当于 this.$route.params
const goToHome = () => {
navigate('/home'); // 相当于 this.$router.push('/home')
};
return (
<div>
当前路径：{location.pathname} <br />
参数：{params.id}
</div>
);
}
在上述代码中，useNavigate 是 React Router 提供的钩子，用于实现路由跳转，类似于 Vue 中的 this.$router。useLocation 和 useParams 分别用于获取当前路由信息和动态参数，类似于 Vue 中的 this.$route 和 this.$route.params。
四、常见误区与面试题
1. this.$router 和 this.$route 能互换吗？
不能！
- •
this.$router是路由管理器，负责跳转、拦截等操作。 - •
this.$route是当前路由信息，只读数据，不能用于跳转。
2. 为什么动态路由要用 params，而查询参数用 query？
- •
params（如/user/:id）：是路由的一部分，适合 SEO 和短链接。 - •
query（如?name=小杨）：是额外参数，不影响路由匹配。
3. 编程式导航能用 <router-link> 替代吗？
可以，但场景不同：
- •
<router-link>：在模板中使用（类似<a>标签）。 - •
this.$router.push()：在 JS 逻辑中使用（例如登录后跳转）。
五、总结
| 对比项 | router | route |
|---|---|---|
| 作用 | 路由管理（跳转、拦截） | 当前路由信息（路径、参数） |
| 类比 | 快递公司调度中心 | 你手里的快递单 |
| Vue | this.$router | this.$route |
| React | useNavigate() | useLocation() |
记住口诀：
- •
router管跳转，route管信息 - • 跳转找
router，参数找route
希望这篇文章能帮助你更好地理解前端路由中的 route 和 router 的区别。如果你在开发中遇到任何问题，欢迎随时交流！
