面试必备：前端路由 route 和 router 的核心要点

前言

在前端开发中，路由是实现单页面应用（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 的区别。如果你在开发中遇到任何问题，欢迎随时交流！