uniapp watch route
时间: 2025-03-24 22:07:51 浏览: 30
### 如何在 UniApp 中监听路由变化
在 UniApp 中,虽然其框架基于 Vue.js 构建,但并不完全支持 Vue 的原生特性。因此,在实现类似于 Vue 的 `watch` 功能来监听路由变化时,需要采用特定的方法。
以下是通过组合 API 实现监听路由变化的方式:
#### 使用全局生命周期函数 `$onPageShow`
UniApp 提供了一个全局事件钩子 `$onPageShow` 和 `$onPageHide` 来处理页面显示和隐藏的状态。可以利用这些钩子捕获路由的变化情况[^1]。
```javascript
export default {
onPageShow() {
console.log('Route changed:', getCurrentPages());
}
};
```
上述代码会打印当前的页面栈信息,从而帮助开发者判断路由是否发生了改变。
#### 利用 `onLoad` 和 `onReady` 生命周期
对于更细粒度的控制,可以在页面组件中使用 `onLoad` 或 `onReady` 生命周期函数来检测参数或者路径的变化。如果需要跨页面共享状态,则推荐引入 Vuex 进行管理[^2]。
```javascript
export default {
data() {
return {
showExtra: false,
};
},
onLoad(options) {
this.showExtra = options.hasOwnProperty('meta') && options.meta === 'showExtra';
},
onReady() {
// Additional logic after page is ready.
},
};
```
当新页面加载时,`options` 参数包含了传递过来的数据,可以根据此数据调整界面行为。
#### 借助第三方库或自定义工具类
如果项目复杂度较高,建议封装一个统一的服务模块用于跟踪所有的导航活动并触发相应的回调函数。这种方法尤其适用于大型应用开发场景下保持代码清晰性和可维护性[^3]。
```javascript
// routerWatcher.js
const routeObserver = (callback) => {
const pages = getCurrentPages();
callback(pages[pages.length - 1].route);
};
export { routeObserver };
```
然后在任何地方调用它即可完成监控操作:
```javascript
import { routeObserver } from './routerWatcher';
routeObserver((currentRoute) => {
console.log(`Current Route Changed To ${currentRoute}`);
});
```
以上就是在 UniApp 中几种常见的监听路由变更的技术方案介绍。
阅读全文
相关推荐


















