vue怎么监听路由

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

如何监听 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
    }
  }
}

方法 2：$route.query
类似于 $route.params，$route.query 也是一个响应式对象，它包含当前路由的查询参数。你可以使用 Vue 的响应式系统来监听 $route.query 的变化。

立即学习“前端免费学习笔记（深入）”；

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

下载

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

方法 3：$route.matched
$route.matched 是一个数组，它包含了当前路由匹配的所有组件。你可以使用 Vue 的响应式系统来监听 $route.matched 的变化。

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

方法 4：beforeRouteEnter/beforeRouteLeave
beforeRouteEnter 和 beforeRouteLeave 是两个钩子函数，它们分别在路由进入和离开组件之前被调用。你可以使用它们来执行与路由变化相关的操作。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入组件之前执行一些操作
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在离开组件之前执行一些操作
    next()
  }
}

方法 5：全局路由守卫
全局路由守卫允许你在任何路由变化之前或之后执行特定的操作。你可以使用 router.beforeEach 和 router.afterEach 方法来配置全局路由守卫。

router.beforeEach((to, from, next) => {
  // 在任何路由变化之前执行一些操作
  next()
})

router.afterEach((to, from) => {
  // 在任何路由变化之后执行一些操作
})