route和router的区别

前端路由傻傻分不清？route和router的区别，看完这篇别再搞混了！

一、前言：为什么这俩玩意儿容易搞混？

刚学前端路由时，我也被route和router搞得头晕眼花，面试还被问：”你能说说$route和$router的区别吗？” 我支支吾吾半天，面试官的表情逐渐凝固… 😅

今天，我们就来彻底搞懂这俩兄弟，让你以后再也不怕面试官的灵魂拷问！

二、一句话总结

router（路由器） ：是管理路由的老大，负责整个路由的跳转、拦截、传参等。
route（路由信息） ：是当前激活的路由对象，存储当前页面的路径、参数、查询参数等信息。

举个栗子 🌰：

router 就像快递公司的调度中心，决定包裹（页面）怎么配送。
route 就像你手里的快递单，记录当前包裹（页面）的信息（地址、收件人、订单号等）。

三、代码实战：Vue里的route和router

1. router（Vue Router实例）

router是全局路由管理器，负责跳转、拦截、动态路由等操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 在Vue组件里使用
export default {
  methods: {
    我的跳转方法() {
      // router.push() 用于跳转
      this.$router.push('/home'); // 跳转到首页
      
      // router.replace() 替换当前路由（不记录历史）
      this.$router.replace('/login');
      
      // router.go() 前进/后退
      this.$router.go(-1); // 返回上一页
    }
  }
}

2. route（当前路由信息）

route是当前激活的路由对象，包含路径、参数、查询参数等信息。

1
2
3
4
5
6
7
8
export default {
  created() {
    // 获取当前路由信息
    console.log(this.$route.path);    // 当前路径，比如 "/user/123"
    console.log(this.$route.params); // 动态参数，比如 { id: "123" }
    console.log(this.$route.query);   // 查询参数，比如 ?name=小杨 → { name: "小杨" }
  }
}

四、React里的类似概念

React没有$router和$route，但概念是相通的：

router → BrowserRouter / HashRouter（React Router的管理者）
route → useLocation() / useParams()（当前路由信息）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useNavigate, useLocation, useParams } from 'react-router-dom';

function 我的组件() {
  const navigate = useNavigate(); // 相当于 this.$router
  const location = useLocation(); // 相当于 this.$route
  const params = useParams();     // 相当于 this.$route.params

  const 跳转首页 = () => {
    navigate('/home'); // 相当于 this.$router.push('/home')
  };

  return (
    <div>
      当前路径：{location.pathname} <br />
      参数：{params.id}
    </div>
  );
}

五、常见误区 & 面试题

1. this.$router 和 this.$route 能互换吗？

❌ 不能！

this.$router 是路由管理器（负责跳转、拦截）。
this.$route 是当前路由信息（只读数据）。

2. 为什么动态路由要用params，而查询参数用query？

params（如/user/:id）→ 是路由的一部分，适合SEO、短链接。
query（如?name=小杨）→ 是额外参数，不影响路由匹配。

3. 编程式导航能用替代吗？

✅ 可以，但场景不同：

→ 模板里用（类似标签）。
this.$router.push() → JS逻辑里用（比如登录后跳转）。

六、总结

对比项 router route
作用 路由管理（跳转、拦截） 当前路由信息（路径、参数）
类比 快递公司调度中心 你手里的快递单
Vue this.$router this.$route
React useNavigate() useLocation()

记住口诀：

router管跳转，route管信息
跳转找router，参数找route

七、最后的小故事

曾经我在项目里疯狂用this.$route.push()，结果控制台疯狂报错，debug半小时才发现… 我把router和route写反了！ 😭

所以，看完这篇，千万别再搞混了！ 🚀