在 Vue.js 中，尤其是结合 Vue Router 时，监听路由变化是一项常见的需求。这可以用于执行如页面标题更新、权限验证、滚动到页面顶部等操作。Vue Router 提供了几种方式来监听路由的变化。 ### 1. 使用 `watch` 监听 `$route` 在 Vue 组件中，你可以通过 `watch` 属性来监听 `$route` 对象的变化。`$route` 对象包含了当前路由的信息，如 URL 解析得到的信息，以及 URL 匹配到的路由记录（route records）。 ```javascript export default { watch: { '$route'(to, from) { // 对路由变化做出响应... console.log("路由变化了", to, from); } } } ``` ### 2. 使用 Vue Router 的导航守卫 Vue Router 提供了全局守卫、路由独享的守卫以及组件内的守卫，这些守卫允许你在路由进入前后执行一些操作。 - **全局前置守卫** ```javascript router.beforeEach((to, from, next) => { // ...执行一些操作 // 一定要调用 next() next(); }); ``` - **全局后置守卫** ```javascript router.afterEach((to, from) => { // 注意：不包括 next，也不会改变导航本身 }); ``` - **路由独享的守卫** 你可以在路由配置上直接定义 `beforeEnter` 守卫： ```javascript const routes = [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] ``` - **组件内的守卫** - `beforeRouteEnter` - `beforeRouteUpdate` (2.2+) - `beforeRouteLeave` 这些守卫允许你在组件内部直接定义路由导航的守卫。 ```javascript export default { beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 next(vm => { // 通过 `vm` 访问组件实例 }) }, beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } } ``` ### 3. 使用 Vue Router 的 `scrollBehavior` 虽然这不是直接监听路由变化，但 `scrollBehavior` 方法允许你根据路由变化来定制页面的滚动行为。这通常用于在路由变化时滚动到页面顶部或特定的位置。 ```javascript const router = new VueRouter({ routes: [...], scrollBehavior(to, from, savedPosition) { // 返回滚动位置的对象 // { x: 0, y: 0 } // { selector: 'someElementId', offset: { x: 0, y: 10 } } (需要 dom-scroll-behavior@next) // 如果返回 falsy 的值，或者是一个空对象，则不会发生滚动。 // 如果 savedPosition 存在，则优先使用 savedPosition.x 和 savedPosition.y return { x: 0, y: 0 } } }) ``` 根据你的具体需求，可以选择最适合你的方法来监听和响应 Vue.js 中的路由变化。