watch:{} 与 this.$watch() 一样

this.$watch() 的使用(这里可以放在Vue生命周期钩子里):

this.$watch('query', (newQuery) => {
            this.$emit('query', newQuery)
        })

watch:{}的使用(一个方法):

watch:{
  query(newQuery){
    this.$emit('query', newQuery)
  }
}
### Vue.js 中 `this.$router` 和 `this.$route` 的区别使用场景 #### 一、基本概念 1. **`this.$router`** 它是一个全局路由对象,提供了许多方法和属性来实现编程式的导航功能。例如,可以通过调用其方法完成页面跳转或其他路由操作[^1]。 2. **`this.$route`** 它表示当前活动的路由状态,包含了许多关于当前路由的信息,如路径 (`path`)、参数 (`params`)、查询字符串 (`query`) 等。它是只读的,无法直接修改[^2]。 --- #### 二、主要区别 | 特性 | `this.$router` | `this.$route` | |---------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------| | **定义** | 路由实例,提供方法和配置项 | 表示当前激活的路由对象 | | **用途** | 编程式导航 (如跳转、替换等),以及动态生成 URL | 获取当前路由的状态信息 (如路径、参数等) | | **可变性** | 提供方法改变路由 | 只读,反映当前路由的实际状态 | | **常用方法/属性** | - `.push()`<br>- `.replace()`<br>- `.go()`<br>- `.back()`<br>- `.forward()` | - `.path`<br>- `.name`<br>- `.params`<br>- `.query`<br>- `.hash` | --- #### 三、具体用法举例 ##### 1. `this.$router` 的常见用法 - **编程式导航** ```javascript // 跳转到新页面并添加历史记录 this.$router.push({ name: 'User', params: { id: 123 } }); // 替换当前页面,不增加历史记录 this.$router.replace({ path: '/login' }); ``` - **动态生成 URL** ```javascript const resolvedUrl = this.$router.resolve({ name: 'UserProfile', params: { userId: 456 } }).href; console.log(resolvedUrl); // 输出类似于 "/user-profile/456" ``` - **控制浏览器历史行为** ```javascript this.$router.go(-1); // 返回上一页 this.$router.forward(); // 前进一页 this.$router.back(); // 后退一页 ``` ##### 2. `this.$route` 的常见用法 - **获取当前路由信息** ```javascript console.log(this.$route.path); // 当前路径 console.log(this.$route.name); // 路由名称 console.log(this.$route.params.id); // 动态路由中的参数 console.log(this.$route.query.page); // 查询参数 ``` - **监听路由变化** ```javascript watch(() => { return $route.fullPath; // 监听完整的路径变化 }, () => { console.log('Route changed!'); }); ``` --- #### 四、典型使用场景 1. **`this.$router` 的适用场景** - 需要进行页面跳转时,无论是新增历史记录还是替换现有记录。 - 示例:用户登录成功后重定向至首页或个人中心。 - 动态生成链接地址而无需立即触发导航。 - 示例:创建分享链接或将特定用户的资料页作为锚点。 - 控制浏览器的历史前进或后退动作。 - 示例:在表单提交失败时返回至上一步操作界面。 2. **`this.$route` 的适用场景** - 访问当前路由的相关数据,例如解析 URL 参数以初始化组件状态。 - 示例:根据查询条件渲染搜索结果列表。 - 在生命周期钩子中判断是否需要重新加载某些资源。 - 示例:检测路由切换过程中是否有未保存的数据提示确认对话框。 - 结合观察器实时响应路由变动事件更新视图内容。 - 示例:滚动条定位调整依据不同的分页编号自动适配最佳显示区域。 --- #### 五、注意事项 - **不可混淆两者的职责范围** 尽管两者名字相似,但它们的功能完全不同。`this.$router` 主要是用来操控整个应用级别的路由逻辑;而 `this.$route` 则专注于捕获即时性的上下文环境变量值[^3]。 - **性能优化建议** 如果频繁访问某类固定的路由元信息,则考虑缓存机制减少重复计算开销。另外,在大型 SPA 应用开发期间务必合理规划命名约定便于后期维护扩展[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值