{ path: '/user/:name' }从 /user/sid 跳转到 /user/moon 时,侦听器中监听this.$route.params.name,由于它不是 data 中声明的变量,因此侦听器方法不会执行吗
时间: 2024-09-12 08:10:30 浏览: 44
在Vue Router中,`{ path: '/user/:name' }`这样的路径表示一个动态路由,`:name`是一个动态参数,当我们在浏览器地址栏通过 `/user/sid` 或 `/user/moon` 进行跳转时,`:name`会被实际的URL参数替换,例如`sid`或`moon`。
对于在组件内部监听`this.$route.params.name`的情况,这并不是数据绑定,而是一种路由参数变化的监听。当你设置了一个属性来监听路由参数的变化,比如:
```javascript
export default {
computed: {
userName() {
return this.$route.params.name;
}
},
mounted() {
this.$watch('$route', (to) => {
console.log('路由参数 name 变化了:', to.params.name);
}, { immediate: true });
}
}
```
在这个例子中,当`/user/sid`跳转到`/user/moon`时,`$route`对象会改变,触发`mounted`钩子中的`watch`,并打印出新的`name`值,即使这个属性本身并未在"data"中声明。
所以,当`this.$route.params.name`的值发生变化时,即使该值未直接在data中声明,监听器方法依然会执行。`immediate: true`使得首次进入组件时也立即执行一次,以便初始化状态。
阅读全文