前端Vue篇之如何获取页面的hash变化、`$route` 和`$router` 的区别、params和query的区别

目录

如何获取页面的hash变化

要获取页面哈希（hash）的变化，你可以使用

window

对象的

hashchange

事件。这个事件会在 URL 的哈希部分发生变化时触发，你可以通过监听这个事件来获取哈希的变化。

要获取页面哈希（hash）的变化，可以通过两种方式：

1. 监听

$route

的变化

在Vue中，你可以使用

watch

属性来监听

$route

的变化。当路由发生变化时，会执行相应的处理函数。

watch:{$route:{handler:function(newRoute, oldRoute){
      console.log('当前路由：', newRoute);
      console.log('之前的路由：', oldRoute);},// 深度观察监听deep:true}}

这样就能在路由发生变化时获取到新的路由信息以及之前的路由信息。

2. 使用

window.location.hash

另一种方法是直接读取

window.location.hash

的值。这个属性可读可写，读取时可以判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。

// 读取哈希值
console.log('当前哈希值：', window.location.hash);// 监听哈希变化
window.addEventListener('hashchange',function(){
  console.log('哈希变化了：', window.location.hash);});

通过以上方法，你可以实时监测页面哈希的变化情况，并做出相应的处理。

$route

和

$router

的区别

$route

和

$router

是Vue Router提供的两个对象，它们在Vue应用中扮演不同的角色。

• **$route**：代表当前活动的路由，是一个只读对象。它包含了当前路由的信息，比如路径、查询参数、哈希、路由参数等。你可以通过访问 $route 对象的属性来获取这些信息。例如，$route.path 表示当前路由的路径。
• **$router**：是Vue Router的实例，用来实现路由的跳转、导航等功能。它提供了一些方法，比如 push、replace 和 go，用于在应用程序中进行导航操作。通过访问 $router 对象，你可以调用这些方法来改变当前路由或导航到其他路由。

所以，简单来说，

$route

是用于获取当前路由信息的对象，而

$router

是用于进行路由导航操作的对象。它们在Vue Router的使用中有着不同的作用和功能。

params和query的区别

params：

• 通过路由路径的一部分来传递参数，例如/user/:id。
• 参数需要在路由定义时配置，使用冒号:来表示参数占位符。
• 参数是必需的，在路由中被捕获，并可以通过$route.params对象来访问。
• 示例：对于路由路径/user/123，参数id的值是123，可以通过this.$route.params.id来访问。

query：

• 使用查询字符串来传递参数，例如/user?id=123。
• 参数作为URL中的查询字符串，通过?和key=value的形式进行传递。
• 参数是可选的，可以随时添加或省略。
• 参数出现在URL的查询字符串中，可以通过$route.query对象来访问。
• 示例：对于路由路径/user?id=123，参数id的值是123，可以通过this.$route.query.id来访问。

总结一下区别：

• params将参数作为路由的一部分，用于捕获和处理特定的路由请求。
• query将参数作为查询字符串，用于配置和过滤路由请求。
• params的参数是必需的，出现在路由的路径中；而query的参数是可选的，出现在URL的查询字符串中。
• params的参数会出现在$route.params对象中；而query的参数会出现在$route.query对象中。

关于刷新时的差异：

• 对于params，当页面刷新时，参数会丢失，因为参数只存在于URL路径中，并不会被浏览器记忆。
• 对于query，当页面刷新时，参数不会丢失，因为参数是作为查询字符串出现在URL中，浏览器会自动保留这些参数。

综上所述，

query

更类似于使用

GET

方法进行参数传递的方式，参数会出现在URL中并在浏览器地址栏中可见，而

params

更类似于使用

POST

方法进行参数传递，参数不会在地址栏中显示。此外，在刷新页面时，

query

的参数会被浏览器保留，而

params

的参数会丢失。

总结来说，params适合将参数作为路由的一部分进行传递，并且参数是必需的，而query适合将参数作为查询字符串进行传递，并且参数是可选的。你可以根据具体情况选择使用哪种方式来传递参数。

持续学习总结记录中，回顾一下上面的内容：

1. 获取页面的hash变化：通过监听 hashchange 事件，可以实时获取页面哈希的变化。使用 window.location.hash 可以读取当前哈希值。
2. $route 和 $router 的区别： - $route 是一个只读对象，代表了当前活动的路由信息，包括路径、参数、查询字符串等。它用于获取路由的信息。- $router 是 Vue Router 的实例，提供了一些方法用于导航路由，如 push、replace 和 go。它用于在应用程序中进行路由导航操作。
3. params和query的区别： - params 是通过路径的一部分来传递参数，用于捕获和处理特定的路由请求。参数是必需的，出现在路径中，可以通过 $route.params 访问。- query 是通过查询字符串来传递参数，用于配置和过滤路由请求。参数是可选的，出现在 URL 的查询字符串中，可以通过 $route.query 访问。 总结：监听 hashchange 事件可获取页面哈希的变化；$route 用于获取当前路由信息，$router 用于进行路由导航；params 通过路径传递参数，query 通过查询字符串传递参数。