一、先想清楚，为啥要监听路由变化？

terry 8小时前阅读数 12 #Vue

在Vue项目里做页面跳转、处理路由参数变化时，经常需要“监听路由变化”来执行对应的逻辑——比如导航栏高亮切换、根据新的商品ID重新请求数据、权限验证拦截等等，那Vue Router到底怎么监听路由变化？不同场景下又该选哪种方式？今天就把常见方法、场景和避坑点一次性讲清楚～

不是所有项目都需要主动监听路由，但遇到这些场景时，监听就成了必需品： - **页面状态同步**：比如导航栏哪个菜单项被选中，得根据当前路由的path或name来加“高亮”样式； - **数据重新加载**：像商品详情页，路由参数是`/goods/:id`，当从`/goods/1`跳到`/goods/2`时，得重新请求ID为2的商品数据； - **权限与拦截**：进入某些页面（个人中心”）前，要判断用户是否登录，没登录就跳转到登录页； - **埋点与统计**：每次路由切换时，上报页面浏览数据，统计用户行为路径。

这些场景的核心逻辑是：路由变化时，触发特定的业务动作，所以得先明确需求，再选合适的监听方式。

Vue Router 监听路由变化的3种核心方式

Vue Router提供了「全局守卫」「组件内watch」「组件内路由守卫」三类方式，各自对应不同场景，下面逐个拆解：

全局路由守卫：控制所有路由的“进出”

全局路由守卫是作用于整个应用所有路由的钩子函数，最常用的是router.beforeEach（还有router.beforeResolve、router.afterEach，但beforeEach用得最多）。

用法示例：在路由配置文件（比如router/index.js）里写全局守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // to：即将进入的目标路由对象
  // from：当前正要离开的路由对象
  // next：必须调用的函数，决定路由是否继续/中断/重定向
  if (to.meta.requiresAuth) { // 假设路由配置了meta.requiresAuth表示需要登录
    if (isUserLoggedIn()) { // 自定义的判断登录状态函数
      next() // 已登录，放行
    } else {
      next({ name: 'Login' }) // 未登录，跳转到登录页
    }
  } else {
    next() // 不需要登录的页面，直接放行
  }
})

适用场景：全局权限验证（比如登录拦截）、全局埋点（每次路由切换时上报）、全局loading控制（路由切换时显示加载动画）。

注意点：next必须调用！如果忘记写next()，路由会卡在“等待跳转”状态，页面永远不更新；如果要中断路由（比如未登录拦截），要通过next({ path: '/login' })这种方式重定向。

组件内用watch监听$route对象

每个Vue组件实例都有一个$route属性，它是当前路由的“快照”，包含path、params、query、name等信息。在组件内用watch监听$route的变化，就能感知路由切换。

基础用法：监听整个$route对象的变化（只要路由有任何变动，比如path、params、query变了，都会触发）：

export default {
  name: 'GoodsDetail',
  watch: {
    '$route' (to, from) {
      // to：新的路由对象；from：旧的路由对象
      const newGoodsId = to.params.id
      this.fetchGoodsData(newGoodsId) // 调用方法重新请求数据
    }
  },
  methods: {
    fetchGoodsData(id) { ... }
  }
}

细粒度监听：如果只关心某个参数（比如params.id或query.search），可以针对性监听，减少不必要的逻辑触发：

watch: {
  '$route.params.id' (newId, oldId) {
    this.fetchGoodsData(newId)
  },
  '$route.query.search' (newQuery, oldQuery) {
    this.fetchSearchResult(newQuery)
  }
}

适用场景：组件内依赖路由参数/查询参数的逻辑（比如商品详情、搜索结果页）；组件内的状态同步（比如根据路由切换tab）。

注意点：如果监听的是对象/嵌套属性（比如$route.query.filter，而filter是个对象），要加deep: true，否则对象内部属性变化不会触发watch，但如果只是监听params.id这种简单类型，不需要deep，性能更优。

组件内的路由守卫：beforeRouteUpdate（处理“组件复用”场景）

当同一路由，仅参数变化时（比如/goods/1→/goods/2），Vue会复用组件实例（避免重复创建组件带来的性能消耗），这时候，created、mounted这类生命周期钩子不会重新执行！如果想在参数变化时执行逻辑，就得用组件内的路由守卫beforeRouteUpdate。

用法示例：

export default {
  name: 'GoodsDetail',
  beforeRouteUpdate(to, from, next) {
    // to：即将进入的目标路由；from：当前离开的路由；next：必须调用
    this.goodsId = to.params.id
    this.fetchGoodsData(this.goodsId)
    next() // 必须调用，让路由继续跳转
  },
  data() {
    return { goodsId: '' }
  },
  methods: {
    fetchGoodsData(id) { ... }
  }
}

和watch的区别：beforeRouteUpdate在路由变化前触发（更像“拦截-处理-放行”），而watch '$route'在路由变化后触发，如果需要在路由更新前做数据准备，用beforeRouteUpdate更合适；如果只是响应路由变化后的结果，用watch更灵活。

适用场景：同一路由下参数变化，且需要在组件更新前处理逻辑（比如提前请求数据，避免页面闪烁）。

不同场景下，选哪种监听方式？

光知道方法还不够,得结合场景选最优解：

场景描述	推荐方式	原因
全局权限验证（所有页面跳转前判断登录）	`router.beforeEach`	全局守卫作用于所有路由，一次配置全局生效
单个组件内，路由参数变化后更新数据	`watch '$route'` 或 `watch '$route.params.xxx'`	组件内局部监听，逻辑内聚，无需影响其他组件
同一路由参数变化，需在组件更新前处理逻辑	`beforeRouteUpdate`	避免组件复用导致生命周期不触发，提前拦截处理
全局埋点、全局loading控制	`router.beforeEach` + `router.afterEach`	路由进入前启动loading，进入后关闭loading；每次跳转都上报埋点
导航栏高亮（多个组件共享的导航逻辑）	全局守卫 + Vuex/Pinia 或每个导航组件内`watch '$route'`	全局守卫可以把当前路由信息存到状态管理，所有导航组件订阅；或每个组件自己监听路由，判断是否是当前页

监听路由时，这些“坑”要避开！

不少同学第一次用路由监听时,容易栽在这些细节里：

全局守卫忘记调用`next()`，路由“卡死”

比如写了router.beforeEach但没写next()，或者在条件分支里漏写：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isLogin()) {
      next() // 这里写了，没问题
    }
    // 注意！如果未登录，这里没写else分支的next，路由会卡住！
  }
})

解决：每个分支都要确保next()被调用，哪怕是next(false)（中断路由）。

组件复用时，生命周期钩子“失效”

比如商品详情页用created钩子请求数据：

export default {
  created() {
    this.fetchGoodsData(this.$route.params.id)
  }
}

当从/goods/1跳到/goods/2时，组件会被复用，created不会重新执行，导致数据还是旧的ID。

解决：改用watch '$route'或beforeRouteUpdate来监听参数变化。

watch监听路由参数时，“深层监听”用错

如果路由的query是个对象（比如/search?filter={ "price": 100 }），直接监听$route.query不会触发变化，因为对象引用没改，这时候要加deep: true：

watch: {
  '$route.query': {
    handler(newQuery, oldQuery) {
      this.fetchFilteredData(newQuery)
    },
    deep: true // 深度监听对象内部变化
  }
}

但如果只是监听$route.params.id这种字符串/数字，不需要deep，否则会额外消耗性能。

路由变化了，但组件没更新（因为复用）

比如两个路由都渲染同一个组件（component: GoodsDetail），只是参数不同，Vue会复用组件实例，导致组件的data和模板没更新。

解决：用beforeRouteUpdate更新数据，或在watch '$route'里主动修改data。

实际项目案例：从需求到代码怎么落地？

光讲理论太虚,看两个真实场景的实现思路：

案例1：导航栏高亮切换

需求：顶部导航栏有“首页”“商品”“关于我们”，路由切换时，对应菜单项加active类。

实现方案：每个导航菜单项组件内，watch '$route'，判断当前路由的path是否匹配自身的to属性：

<template>
  <div class="nav-item" :class="{ active: isActive }">
    <router-link :to="to">{{ label }}</router-link>
  </div>
</template>
<script>
export default {
  props: {
    to: String,
    label: String
  },
  computed: {
    isActive() {
      return this.$route.path === this.to
    }
  },
  watch: {
    '$route'() {
      // 路由变化时，computed的isActive会自动更新，触发样式变化
    }
  }
}
</script>

（也可以用全局守卫把当前路由存到Vuex，导航组件订阅Vuex状态，看团队技术方案偏好～）

案例2：搜索页根据query参数刷新结果

需求：搜索页URL是/search?q=关键词，当用户修改搜索框内容并回车时，路由的query.q变化，页面重新请求搜索结果。

实现方案：组件内watch '$route.query.q'，参数变化时发请求：

<template>
  <div>
    <input v-model="searchQuery" @keyup.enter="handleSearch" />
    <ul>
      <li v-for="item in searchResults" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    }
  },
  watch: {
    '$route.query.q'(newQ) {
      this.searchQuery = newQ // 把路由参数同步到搜索框
      this.fetchSearchResults(newQ)
    }
  },
  methods: {
    handleSearch() {
      this.$router.push({ name: 'Search', query: { q: this.searchQuery } })
    },
    fetchSearchResults(q) {
      // 调用接口，把结果赋值给searchResults
    }
  },
  created() {
    // 页面初始化时，从路由query取参数
    this.searchQuery = this.$route.query.q || ''
    this.fetchSearchResults(this.searchQuery)
  }
}
</script>

案例3：全局权限拦截（登录验证）

需求：所有配置了meta.requiresAuth: true的路由，必须登录后才能访问，否则跳转到登录页。

实现方案：用router.beforeEach全局守卫：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
Vue.use(Router)
const router = new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { 
      path: '/profile', 
      name: 'Profile', 
      component: Profile, 
      meta: { requiresAuth: true } // 需要登录的标记
    },
    { path: '/login', name: 'Login', component: Login }
  ]
})
// 模拟判断登录状态的函数
function isLogin() {
  return localStorage.getItem('token') !== null
}
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isLogin()) {
      next() // 已登录，放行
    } else {
      next({ name: 'Login', query: { redirect: to.fullPath } }) // 跳登录，并记录要跳转的页面
    }
  } else {
    next() // 不需要登录的页面，直接放行
  }
})
export default router

记住这3步，路由监听不踩坑

明确需求：是全局逻辑（如权限、埋点）还是组件内逻辑（如参数变化更新数据）？
选对方式：全局逻辑用router.beforeEach等全局守卫；组件内逻辑用watch '$route'或beforeRouteUpdate；
避坑细节：全局守卫别忘next()，组件复用要注意生命周期，watch深层监听按需使用。

路由监听是Vue Router开发里的高频需求，理解不同方式的适用场景，结合项目需求灵活搭配，才能既高效又少踩坑～如果还有具体场景拿不准，评论区留言，咱们一起分析～