前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!

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

刚学前端路由时,我也被routerouter搞得头晕眼花,面试还被问:"你能说说$route$router的区别吗?" 我支支吾吾半天,面试官的表情逐渐凝固... 😅

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


二、一句话总结

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

举个栗子 🌰

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

三、代码实战:Vue里的routerouter

1. router(Vue Router实例)

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

javascript 复制代码
// 在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是当前激活的路由对象,包含路径、参数、查询参数等信息。

javascript 复制代码
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,但概念是相通的:

  • routerBrowserRouter / HashRouter(React Router的管理者)
  • routeuseLocation() / useParams()(当前路由信息)
javascript 复制代码
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.$routerthis.$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

七、最后的小故事

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

所以,看完这篇,千万别再搞混了! 🚀

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群:906392632

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关推荐
望获linux21 小时前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241921 小时前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled21 小时前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia21 小时前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia21 小时前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu21 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥21 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
IT_陈寒1 天前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&1 天前
css word属性
前端·css
fruge1 天前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化