Vue2 怎么监听路由变化？不同场景下该用啥方法？

terry 12小时前阅读数 12 #Vue

文章标签 Vue2 路由监听

做Vue项目的时候,经常碰到“切换路由后要更新数据”“进入路由前判断权限”这类需求，比如后台管理系统切换左侧菜单（对应不同路由），要刷新表格数据；或者进入付费课程页面，得先判断用户有没有购买权限，那在Vue2里，到底咋监听路由变化？不同场景下选哪种方法更顺手？今天拆解三种常用思路，结合实际例子讲明白～

全局路由守卫：管控整个应用的路由跳转

全局路由守卫是通过路由实例（router）的方法来注册的，作用范围是整个Vue应用的所有路由，最常用的有两个：beforeEach（路由跳转前拦截）和afterEach（路由跳转后处理）。

beforeEach：跳转前的“门禁”逻辑

想象一下后台系统的登录拦截场景：用户没登录的话，除了登录页，其他页面都不能进，这时候用beforeEach就很合适，在项目的router.js里这么写：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'
Vue.use(Router)
const router = new Router({
  routes: [
    { name: 'Login', path: '/login', component: Login },
    { name: 'Dashboard', path: '/dashboard', component: Dashboard }
  ]
})
// 全局前置守卫：每次路由跳转前都会触发
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') // 假设用localStorage存登录态
  if (to.name !== 'Login' && !isLogin) {
    // 没登录，且要去的不是登录页 → 强制跳登录
    next({ name: 'Login' })
  } else {
    // 已登录，或者要去的是登录页 → 放行
    next()
  }
})
export default router

这里的to是目标路由对象（要跳转到哪），from是当前路由对象（从哪跳过来），next是必须调用的函数——调用next()表示“放行”，调用next({ name: 'xxx' })表示“强制跳转到xxx路由”，调用next(false)表示“留在当前页面”。

如果要做更细的权限控制（比如某些页面只有管理员能进），可以给路由配置meta字段，再在beforeEach里判断：

routes: [
  { 
    name: 'AdminPage', 
    path: '/admin', 
    component: AdminPage, 
    meta: { requiresAdmin: true } // 标记该页面需要管理员权限
  }
]
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token')
  const isAdmin = localStorage.getItem('role') === 'admin'
  if (to.meta.requiresAdmin) {
    if (isLogin && isAdmin) {
      next()
    } else {
      next({ name: 'Forbidden' }) // 没有权限跳403页面
    }
  } else {
    // 其他页面走普通登录拦截逻辑...
    next()
  }
})

afterEach：跳转后的“后置处理”

afterEach没有next参数（因为路由已经跳转完成了），适合做不影响跳转的后置操作，比如埋点统计、页面加载进度条关闭。

举个埋点的例子：记录用户访问每个页面的路径和时间，可以在beforeEach里记录“进入时间”，在afterEach里计算时长并上报：

let enterTime = 0
router.beforeEach((to, from, next) => {
  enterTime = Date.now() // 记录进入当前路由的时间
  next()
})
router.afterEach((to, from) => {
  const duration = Date.now() - enterTime // 计算停留时长
  console.log(`用户从${from.path}跳到${to.path}，停留了${duration}毫秒`)
  // 埋点上报代码：把to.path、duration等信息发给后端
})

适用场景：全局权限控制、所有页面的埋点/统计、全局Loading进度条（跳转前显示，跳转后隐藏）等跨页面的全局逻辑。

组件内路由守卫：精准控制单个组件的生命周期

如果需求是“某个组件进入/更新/离开时，执行专属逻辑”，进入商品详情页时请求数据”“路由参数变化时更新数据”“离开编辑页时提示保存”，这时候用组件内路由守卫更精准，每个Vue组件可以定义三个守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

beforeRouteEnter：进入组件前触发（组件实例还没创建）

假设做一个商品详情页,路由是/product/:id，进入页面时要根据id请求商品数据，但这个守卫触发时，组件实例（this）还没创建，所以请求数据后要通过next的回调访问组件实例：

export default {
  name: 'ProductDetail',
  data() {
    return {
      product: {} // 存储商品数据
    }
  },
  // 进入组件前触发
  beforeRouteEnter(to, from, next) {
    // 这里this是undefined，因为组件还没创建
    axios.get(`/api/product/${to.params.id}`)
      .then(res => {
        // next的回调函数里，vm就是组件实例（相当于this）
        next(vm => {
          vm.product = res.data
        })
      })
  }
}

beforeRouteUpdate：路由参数变化但组件复用（组件实例已存在）

还是商品详情页的例子：如果从/product/1跳到/product/2，因为路由结构一样（都是/product/:id），Vue会复用组件实例（不会销毁再重建），这时候要重新请求数据，就用beforeRouteUpdate：

beforeRouteUpdate(to, from, next) {
  // 这里this已经存在（组件实例已创建）
  this.product = {} // 先清空旧数据
  axios.get(`/api/product/${to.params.id}`)
    .then(res => {
      this.product = res.data
      next() // 必须调用next放行路由跳转
    })
}

这个守卫的核心是：路由参数变化但组件没销毁时触发，适合处理“组件复用下的更新逻辑”。

beforeRouteLeave：离开组件前触发（可拦截跳转）

用户在表单页填了内容,离开前要提示“是否保存？”，就用beforeRouteLeave：

export default {
  name: 'FormPage',
  data() {
    return {
      formEdited: false, // 标记表单是否修改过
      formData: {}
    }
  },
  methods: {
    handleInput() {
      this.formEdited = true
    }
  },
  // 离开组件前触发
  beforeRouteLeave(to, from, next) {
    if (this.formEdited) {
      const confirm = window.confirm('表单还没保存，确定要离开吗？')
      if (confirm) {
        next() // 确定离开 → 放行
      } else {
        next(false) // 取消离开 → 留在当前页面
      }
    } else {
      next() // 没修改过 → 直接放行
    }
  }
}

适用场景：单个组件的初始化（如根据路由参数请求数据）、组件复用后的更新、离开前的确认/数据清理等组件专属的路由交互逻辑。

watch 监听 $route 对象：灵活响应路由变化

如果需求是“组件内对路由变化做灵活响应”，只关心路由参数里的id变化”“根据路由路径变化显示不同Tab”，用watch监听$route对象更自由，Vue组件的watch选项可以监听$route的变化，还能针对$route的某个属性（如params、query、path）做细粒度监听。

监听路由参数的变化

比如用户信息页路由是/user/:id，每次id变化都要重新请求用户数据：

export default {
  name: 'UserInfo',
  data() {
    return {
      user: {}
    }
  },
  watch: {
    // 监听$route.params.id的变化
    '$route.params.id'(newId, oldId) {
      this.getUser(newId)
    }
  },
  methods: {
    getUser(id) {
      axios.get(`/api/user/${id}`)
        .then(res => {
          this.user = res.data
        })
    }
  }
}

监听整个$route的变化

如果要根据路由的整体变化做复杂逻辑（比如从商品页跳购物车时记录浏览轨迹）：

watch: {
  $route(to, from) {
    if (to.path === '/cart' && from.path === '/product') {
      // 从商品页跳到购物车，记录用户浏览的商品id
      this.recordTrack(from.params.id)
    }
  }
}

和组件内守卫的区别：组件内守卫是“生命周期式”的钩子（和组件创建、更新、销毁强绑定），而watch更像“响应式逻辑”——不需要和组件生命周期强关联，想监听哪部分就监听哪部分，写法更自由。

适用场景：组件内对路由变化的“局部响应”，比如根据搜索参数（query）变化刷新列表、根据路由切换显示不同Tab等组件内的灵活逻辑。

不同方法怎么选？看场景匹配度

最后总结下三种方法的核心区别和适用场景,帮你快速做选择：

方法	作用范围	核心特点	典型场景
全局路由守卫（beforeEach/afterEach）	整个Vue应用	管控所有路由的跳转逻辑	全局权限控制、全局埋点、全局Loading
组件内路由守卫（beforeRouteEnter/Update/Leave）	单个组件	和组件生命周期强绑定，处理组件专属的路由交互	组件初始化请求数据、组件复用更新、离开前确认
watch $route	单个组件	灵活监听路由的任意部分，响应式处理	根据路由参数/查询参数变化更新数据、路由切换时的局部逻辑

举个综合例子辅助理解：做一个博客系统，包含“文章列表页（/article/list）”和“文章详情页（/article/detail/:id）”。

全局守卫：用beforeEach判断用户是否登录（如果有会员文章需要登录才能查看）。
文章详情组件内：用beforeRouteEnter在进入时请求文章数据；如果从/article/detail/1跳到/article/detail/2（组件复用），用beforeRouteUpdate更新数据；离开详情页时，用beforeRouteLeave提示“是否要收藏这篇文章？”。
文章列表组件：如果有搜索功能（路由带query，如/article/list?keyword=Vue），用watch监听$route.query.keyword，变化时重新请求文章列表。