vue怎么监听路由

在 vue.js 中监听路由变化的方法有五种：使用 $route.params 监听路由参数变化。使用 $route.query 监听路由查询参数变化。使用 $route.matched 监听当前路由匹配的所有组件变化。使用 beforerouteenter 和 beforerouteleave 钩子函数在路由进入或离开组件前执行操作。使用 router.beforeeach 和 router.aftereach 全局路由守卫在任何路由变化前或后执行操作。

(图1)

如何监听 Vue.js 中的路由变化

前言
监听路由变化是 Vue.js 中一个常见需求，它允许你在路由发生改变时执行特定的操作。本文将详细介绍如何在 Vue.js 中使用不同的方法监听路由变化。

方法 1：$route.params
$route.params 是一个响应式对象，它包含当前路由的参数。当路由发生变化时，$route.params 也会随之更新。你可以使用 Vue 的响应式系统来监听 $route.params 的变化。

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    '$route.params.id': {
      handler(newVal, oldVal) {
        this.count++
      },
      immediate: true
    }
  }
}