Vue-router深度解析：route与router的区别及hash与history模式

"前端模拟面试题，主要涉及Vue-router中的$route和$router的区别，以及Vue-router的hash模式和history模式的差异。" 在Vue.js应用中，Vue-router是官方推荐的路由管理库，用于处理页面间的导航和状态管理。本资源主要探讨了其中两个关键概念：$route和$router。 首先，$route是Vue-router提供的一种机制，用于**获取当前路由信息的对象**。它包含了多个属性，帮助开发者了解和利用当前路由的状态： 1. **$route.path**：当前路由的绝对路径，如"/shops/goods"。 2. **$route.params**：存储动态片段和全匹配片段的键值对，用于传递动态参数。 3. **$route.query**：包含URL查询参数，例如，"$route.query.favorite"可以获取到"?favorite=yes"的值。 4. **$route.router**：返回当前路由规则所属的路由器实例，以及与之关联的组件。 5. **$route.matched**：一个数组，包含了所有匹配路径的路由配置对象。 6. **$route.name**：如果设置了命名路由，此属性将包含路由的名字。 理解了$route，我们可以方便地获取和利用路由信息，为应用提供更丰富的交互体验。 其次，$router则扮演了**导航控制的角色**。它提供了方法来改变当前路由，如`$router.go(-1)`，这会触发浏览器的前进/后退操作，类似于jQuery中的`window.location`。通过$router，我们可以实现页面的动态跳转、编程式导航等。 接下来，我们转向Vue-router的两种模式：**hash模式**和**history模式**。默认情况下，Vue-router使用hash模式，URL中总是包含"#". 这种模式下，更改#后面的部分不会导致页面的重新加载，非常适合单页应用（SPA）。 然而，**history模式**在某些场景下更有优势，比如当希望URL看起来更"正常"，没有#号，更适合推广。在开发应用或分享页面时，如果目标平台不支持#号，history模式是更好的选择。然而，history模式的一个挑战是，当在非根路径下刷新页面时，可能会遇到404错误。这时需要后端配合，配置服务器进行URL重定向，确保所有非根路径都指向应用的入口（通常为index.html），从而避免404问题。 总结来说，Vue-router的$route和$router分别关注路由信息的获取和导航控制，而hash模式和history模式则根据应用需求和环境来选择，两者各有优缺点，需要根据实际情况灵活运用。理解和掌握这些概念，对于前端开发者来说至关重要，能提升开发效率和应用质量。