2024年3月11日发(作者：)
vue3接收路由参数
Vue框架的特点之一是能够轻松的处理和操作路由。当我们使用Vue实现完整的Web
应用时，通常需要基于路由进行页面之间的跳转和传参。在Vue3中，路由与过去相比发生
了些变化，因此本文将详细介绍Vue3中如何接收路由参数。
## Vue Router简介
Vue Router是官方的路由管理器，它与核心深度集成，可以非常简单
地实现向应用中添加路由功能。Vue Router提供了动态路由、嵌套路由、参数传递、路由
守卫、路由重定向等路由功能，而且还支持基于Web History API和Hash模式的两种路由
模式。
Vue Router的核心是定义路由，路由是由URL路径和相应的组件构成的。在路由的定
义中，我们可以指定组件和URL路径，还可以定义路由参数和路由守卫等。Vue Router内
置了两种路由模式，即hash（#）和历史记录（history）。它可以很好地支持前端路由，
允许应用页面在不刷新的情况下更新页面内容。
在Vue3中接收路由参数与Vue2基本相同，通过$route对象来获取路由参数。$route
是Vue Router提供的全局路由对象，它是在实例化Vue Router的过程中自动生成的。在
使用Vue Router时，我们可以在组件中通过$route来获取路由相关的参数。
路由参数是通过URL路径传递的，一般用于标识唯一的资源或者是参数化的页面。在
路由参数中，我们可以指定参数名和参数值，例如：
```
{
path: '/user/:id', //路径参数id
component: User
}
```
在上面的路由定义中，我们可以通过:id来标识参数名，例如/user/1表示id=1。在
Vue3中，我们可以通过$来获取路由参数，例如：
$是一个对象，它与上面路由参数的定义相关联。在这个对象中，我们
可以通过参数名来获取对应的参数值。
另外，如果我们在定义路由的时候使用了query参数，那么在接收这些参数时需要使
用$。query参数是通过URL查询字符串传递的，可以用来传递非必要的参数
或者一些可选参数。例如：
除了params和query，Vue Router还提供了其他一些路由参数，包括name、path、
hash和params和query等。这些参数都可以通过$route来获取。
## 获取路由参数的变化
在某些情况下，我们需要监听路由参数的变化，例如在用户更改参数时需要重新加载
数据。Vue3提供了两种方式来监听路由参数的变化，分别是$route的watcher和$route
的生命周期钩子。
### $route的watcher
$route是一个响应式对象，我们可以使用Vue的watcher来监听它的变化。当路由参
数变化时，watcher会立即触发。
```js
export default {
watch:{
'$':function(newValue, oldValue){
('id发生变化：'+ newValue +'-->'+ oldValue);
}
}
}
```
在上面的代码中，我们使用了$作为watcher的目标，当路由参数id
发生变化时，watcher会触发。这个watcher会接收新值和旧值作为参数，我们可以在函
数内部进行一些处理。
$route对象还提供了一些生命周期钩子，我们可以通过这些钩子来监听路由参数的变
化。
- beforeRouteEnter: 在进入路由之前触发
- beforeRouteLeave: 在离开路由之前触发
- beforeRouteUpdate: 在路由参数发生变化之前触发
在这些生命周期钩子中，$route是已经更新的，我们可以通过$route来获取路由参数
并进行逻辑处理。这些生命周期钩子都是作为组件的方法存在。例如：
在上面的代码中，我们使用了beforeRouteUpdate方法来监听路由参数的变化，当路
由参数发生变化时，方法会触发。在方法内部，我们使用来获取新的路由参数，
这个参数将会被保存在$中，然后我们通过next()函数来继续执行路由的更
新。
## 结论
在实现Vue3应用时，路由是不可或缺的一个部分。在路由中，我们可以通过路由参数
来传递数据并进行页面跳转。Vue Router提供了很多特性，包括动态路由、嵌套路由、路
由参数、路由守卫等等。在路由的实现中，我们需要通过$route对象来获取路由相关的参
数，并且需要监听其变化才能达到我们想要的效果。Vue3为我们提供了两种方式来监听路
由参数的变化，一种是使用$route的watcher，一种是使用$route的生命周期钩子。对于
路由的实现，我们需要根据需求选择相应的方法。
发布评论