一、先搞懂，Vue Router里路由变化的本质是什么？

1. 导航触发：用户操作（或代码调用）触发路由跳转；
2. 导航守卫执行：全局、路由配置、组件内的各类钩子函数依次执行（比如权限判断、数据预加载）；
3. 路由匹配与组件更新：根据新路由匹配对应的组件，决定是创建新组件实例、复用已有实例，还是销毁旧实例；
4. DOM更新与事件收尾：页面视图更新后，执行后续收尾逻辑（比如埋点统计）。

简单说，“路由变化”是个跨层级、多阶段的过程，不同阶段提供了不同的“监听入口”（也就是各种导航守卫和响应式机制），我们要做的是在合适的阶段插入逻辑。

监听路由变化的3种核心方式，分别适合什么场景？

Vue Router提供了全局导航守卫、组件内导航守卫、响应式监听（watch $route） 三类方式，它们的作用域、触发时机、适用场景完全不同——

（一）全局导航守卫：控制全局路由逻辑

全局导航守卫绑定在router实例上，能拦截所有路由切换，适合处理“全局通用逻辑”（比如权限验证、全局埋点、页面滚动重置）。

常用的两个API：

• router.beforeEach：导航触发后、组件渲染前执行，能拦截/重定向导航；
• router.afterEach：导航完成后（DOM已更新） 执行，适合做“不影响导航流程”的收尾逻辑。

示例1：全局权限验证（beforeEach）

如果某些页面需要登录才能进入，用beforeEach拦截导航：

const router = createRouter({ ... }) // 假设已创建路由实例
router.beforeEach((to, from, next) => {
  // to：目标路由对象；from：当前路由对象；next：控制导航的函数
  const isLogin = localStorage.getItem('token') // 假设用token判断登录状态
  const requiresAuth = to.meta.requiresAuth // 路由元信息标记是否需要权限
  if (requiresAuth && !isLogin) {
    next({ name: 'Login' }) // 未登录，强制跳登录页
  } else {
    next() // 放行导航
  }
})

示例2：全局埋点统计（afterEach）

每次路由切换后，记录用户行为（不需要拦截导航，所以用afterEach）：

router.afterEach((to, from) => {
  // 上报路由切换信息到后端/统计系统
  axios.post('/api/track', {
    from: from.name,
    to: to.name,
    time: new Date().getTime()
  })
})

适用场景：权限控制、全局错误拦截、页面切换动画触发、全局埋点等“所有路由都要执行”的逻辑。

（二）组件内导航守卫：聚焦当前组件逻辑

组件内导航守卫是定义在单个组件里的钩子函数，只对“当前组件相关的路由切换”生效，常见的三个钩子：

• beforeRouteEnter：进入组件前触发（组件实例还没创建，this为undefined）；
• beforeRouteUpdate：路由参数变化但组件复用时触发（比如/user/1→/user/2，组件不销毁，只更新参数）；
• beforeRouteLeave：离开组件前触发（可以拦截导航，比如提示“表单未保存”）。

示例1：进入组件前预加载数据（beforeRouteEnter）

如果进入页面时需要先拉取数据，且想在“组件渲染前完成请求”，用beforeRouteEnter（注意拿组件实例的特殊方式）：

export default {
  data() {
    return { list: [] }
  },
  beforeRouteEnter(to, from, next) {
    // 此时组件实例还没创建，this是undefined
    axios.get(`/api/list/${to.params.id}`).then(res => {
      // 通过next的回调获取组件实例vm
      next(vm => {
        vm.list = res.data // 把请求到的数据赋值给组件
      })
    }).catch(() => {
      next(false) // 请求失败，阻止进入该页面
    })
  }
}

示例2：路由参数变化时更新数据（beforeRouteUpdate）

当路由参数变化但组件复用（比如用户从“用户1”切到“用户2”，组件不销毁），用beforeRouteUpdate更新数据：

export default {
  data() {
    return { userId: '' }
  },
  beforeRouteUpdate(to, from, next) {
    // 此时组件实例已存在，this可用
    this.userId = to.params.id // 更新当前用户ID
    this.fetchUserInfo() // 重新拉取用户信息
    next() // 放行导航
  },
  methods: {
    fetchUserInfo() { ... }
  }
}

示例3：离开组件前拦截导航（beforeRouteLeave）

如果表单有未保存的修改，离开页面时提示用户：

export default {
  data() {
    return { form: {}, isEdited: false }
  },
  methods: {
    handleInput() {
      this.isEdited = true // 标记表单有修改
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isEdited) {
      const isConfirm = window.confirm('表单有修改，确定离开？')
      if (isConfirm) {
        next() // 确认离开，放行导航
      } else {
        next(false) // 取消离开，留在当前页面
      }
    } else {
      next() // 无修改，直接放行
    }
  }
}

适用场景：当前组件专属的“进入前准备、参数变化响应、离开前拦截”逻辑（比如表单守卫、组件内数据预加载）。

（三）监听$route对象：响应式追踪路由变化

Vue的响应式系统中，$route是响应式对象（它的属性变化会触发视图更新），所以我们可以用watch来监听$route的变化，灵活响应路由切换。

示例1：监听整个$route变化

路由切换时，自动刷新列表数据：

export default {
  data() {
    return { list: [] }
  },
  watch: {
    // 监听$route对象的变化
    '$route'(to, from) {
      this.fetchList(to.params.category) // 根据新路由参数拉取数据
    }
  },
  methods: {
    fetchList(category) { ... }
  }
}

示例2：监听$route的某个属性（比如params）

只关注路由参数id的变化，避免不必要的重复请求：

export default {
  watch: {
    // 监听$route.params.id的变化
    '$route.params.id'(newId, oldId) {
      if (newId !== oldId) { // 防止初始化时重复触发
        this.fetchDetail(newId)
      }
    }
  },
  methods: {
    fetchDetail(id) { ... }
  }
}

适用场景：已有组件中“临时添加路由响应逻辑”（不需要改动组件内守卫，只需新增watch），或需要“细粒度监听路由某部分变化”的场景。

实战场景：路由变化时这些需求怎么落地？

光懂原理不够，得结合真实场景练手，下面列举4类高频需求，看怎么选方法、写代码——

（一）权限控制：不同角色看到不同页面

需求：普通用户看不到/admin页面，管理员看不到/user页面。
方案：用全局beforeEach + 路由元信息（meta），统一管理权限逻辑。

// 路由配置：给需要权限的页面加meta标记
const routes = [
  { path: '/admin', component: Admin, meta: { role: 'admin' } },
  { path: '/user', component: User, meta: { role: 'user' } }
]
// 全局守卫：验证角色
router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('role') // 假设存在localStorage
  const requiredRole = to.meta.role
  // 路由不需要权限，或角色匹配，则放行
  if (!requiredRole || requiredRole === userRole) {
    next()
  } else {
    next({ name: 'Forbidden' }) // 角色不匹配，跳403页面
  }
})

（二）页面滚动重置：路由切换后回到顶部

需求：每次切换页面，滚动条自动回到顶部（避免用户看到上一页的滚动位置）。
方案：用全局afterEach，在导航完成后执行滚动操作。

router.afterEach(() => {
  // 兼容不同浏览器的滚动API
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选：平滑滚动效果
  })
})

（三）数据预加载：进入页面前拉取数据

需求：进入商品详情页/product/:id前，先拉取商品数据，避免页面闪烁。
方案：用组件内beforeRouteEnter，在组件渲染前完成请求。

export default {
  data() {
    return { product: {} }
  },
  beforeRouteEnter(to, from, next) {
    axios.get(`/api/product/${to.params.id}`).then(res => {
      next(vm => {
        vm.product = res.data // 把数据赋值给组件实例
      })
    }).catch(() => {
      next({ name: 'Error' }) // 请求失败，跳错误页
    })
  }
}

（四）表单未保存提示：离开页面时拦截

需求：用户编辑表单时如果没保存，离开页面要弹窗提示。
方案：用组件内beforeRouteLeave，拦截导航并提示。

export default {
  data() {
    return { form: { name: '' }, isSaved: true }
  },
  methods: {
    saveForm() {
      // 保存逻辑...
      this.isSaved = true
    }
  },
  beforeRouteLeave(to, from, next) {
    if (!this.isSaved) {
      const confirm = window.confirm('表单未保存，确定离开？')
      confirm ? next() : next(false)
    } else {
      next()
    }
  }
}

踩坑指南：路由变化监听常见问题怎么解？

实战中总会碰到“路由变了但数据没更新”“守卫执行顺序乱了”这类坑，提前避坑能省很多时间——

（一）路由变了，组件数据却没更新？

原因：Vue Router在“路由参数变化但组件复用”时（比如/user/1→/user/2），不会销毁组件，所以created、mounted等生命周期钩子不会重新执行，数据自然不会更新。

解决方法：

• 用组件内beforeRouteUpdate：在路由参数变化时主动更新数据；
• 用watch监听$route：响应式追踪路由变化，触发数据更新。

// 方法1：beforeRouteUpdate
export default {
  beforeRouteUpdate(to, from, next) {
    this.fetchData(to.params.id) // 重新拉取数据
    next()
  }
}
// 方法2：watch $route
export default {
  watch: {
    '$route.params.id'(newId) {
      this.fetchData(newId)
    }
  }
}

（二）多个导航守卫执行顺序搞反了？

执行顺序规则：
全局beforeEach → 当前组件beforeRouteLeave → 全局beforeResolve → 目标组件beforeRouteEnter → 全局afterEach。

如果有嵌套路由（比如父路由/home，子路由/home/list），父路由的守卫会先于子路由执行。

避坑技巧：全局守卫负责“通用逻辑”（如权限），组件内守卫负责“组件专属逻辑”（如表单提示），避免逻辑冲突。

（三）在beforeRouteEnter里拿不到this？

原因：beforeRouteEnter触发时，组件实例还没创建，所以this是undefined。

解决方法：通过next的回调函数获取组件实例（vm）：

beforeRouteEnter(to, from, next) {
  next(vm => {
    // vm就是组件实例，可访问vm.data、vm.methods
    vm.doSomething()
  })
}

（四）异步操作在守卫里没等完成就跳转了？

原因：如果在守卫里用Promise或async/await，但没等异步完成就调用next，会导致逻辑不完整（比如权限还没验证就放行）。

解决方法：确保next在异步操作完成后调用：

router.beforeEach(async (to, from, next) => {
  const res = await checkAuth() // 异步验权（返回Promise）
  if (res.success) {
    next() // 验权通过，放行
  } else {
    next({ name: 'Login' }) // 验权失败，跳登录页
  }
})

不同场景选对监听方式，效率翻倍

最后用一张表总结三类方法的核心区别，帮你快速决策：

简单说：全局逻辑用全局守卫，组件逻辑用组件守卫，临时需求用watch，掌握这三类方式的触发时机和场景，不管是权限控制、数据预加载，还是表单拦截，都能找到最顺手的实现方案～

（文章到这里就结束啦～如果对你理解Vue Router的路由变化监听有帮助，不妨动手试试不同场景的代码，把知识变成实操能力～）