vue3 watch监听页面

### Vue 3 中监听页面变化

在 Vue 3 中，可以通过 `watch` 和组合式 API 来监听路由的变化。Vue Router 提供了几种方法来处理导航守卫和监听路由变化。

#### 使用 `onBeforeRouteUpdate`

当组件内需要响应路由参数变化时，可以使用 `onBeforeRouteUpdate` 寿命钩子函数[^2]：

import { onBeforeRouteUpdate } from 'vue-router';

export default {
    setup() {
        onBeforeRouteUpdate((to, from) => {
            console.log('路由即将更新', to.path);
        });
        
        return {};
    }
}

#### 使用 `watch` 监听 `$route`

对于更复杂的逻辑，可以直接通过 `watch` 方法监视当前的 `$route` 对象，从而捕获任何路径上的改变事件：

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();
        let currentPath = ref(route.path);

        watch(() => route.fullPath, (newVal, oldVal) => {
            console.log(`新路径 ${newVal}, 老路径 ${oldVal}`);
            currentPath.value = newVal;
        });

        return {
            currentPath,
        };
    },
};

上述代码展示了如何利用组合API模式下的 `watch` 函数监控路由对象属性的变化，并执行相应的操作。

#### 利用全局前置守卫

如果希望在整个应用范围内拦截并处理所有的路由跳转行为，则可以在创建路由器实例之后设置全局前置守卫[^1]：

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  // 执行一些逻辑...
  next(); // 确保调用了next()
});

这种机制允许开发者定义特定条件下阻止或重定向用户的访问请求。