首页vue3监听路由跳转

vue3监听路由跳转

时间: 2025-02-14 17:17:56 浏览: 49

### Vue 3 中监听路由变化在 Vue 3 中，可以利用 `vue-router` 提供的功能来监听路由的变化。通过 Composition API 和 Options API 都能实现这一目标。 #### 使用 Composition API 监听路由变化当采用 Composition API 时，推荐使用 `watch` 函数配合 `useRoute` 来响应 URL 的改变： ```javascript import { watch } from 'vue'; import { useRoute, onBeforeRouteUpdate } from 'vue-router'; export default { setup() { const route = useRoute(); // 监视当前路径参数的变化 watch(() => route.path, (toPath, fromPath) => { console.log('新路径:', toPath); console.log('旧路径:', fromPath); }); // 或者使用导航守卫，在更新前执行逻辑 onBeforeRouteUpdate((to, from) => { console.log('即将离开', from.path); console.log('前往', to.path); // 可在此处返回 false 或 Promise.reject() 来取消导航 }); return {}; } } ``` 上述代码展示了如何监视整个应用级别的路由变动以及组件内部特定于该组件的路由参数变更[^1]。 #### 设置全局前置守卫如果希望在整个应用程序范围内拦截所有的导航请求，则可以在创建路由器实例之后设置全局前置守卫: ```javascript const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { console.log(`从 ${from.fullPath} 到 ${to.fullPath}`); // 执行任何必要的验证或其他操作 next(); // 继续导航到下一个页面 }); ``` 这种方式适用于需要统一处理所有页面切换的情况，比如权限校验等场景。

阅读全文