每个人都可以，
拥有SSL证书

深入探讨Vue3路由变化的五种监听方案：Watch、全局/组件导航守卫、组合式API与后置钩子。

从参数监听、组件权限控制到全局权限管理及数据统计，详细阐述每种方案的适用场景、优缺点，并提供最佳实践指导，助你灵活运用，打造高效、安全的路由系统。

在Vue3应用中，路由变化监听是构建动态交互的核心技术。5种实现方案，涵盖从基础监听到高级权限控制的完整技术体系。

核心实现方案

Watch监听route对象

通过Vue响应式系统直接监听路由对象变化，支持深度监听和特定参数追踪。

import { watch } from 'vue'
import { useRoute } from 'vue-router'

export function useRouteWatcher() {
  const route = useRoute()
  
  // 监听完整路由对象
  watch(
    () => route,
    (newRoute, oldRoute) => {
      console.log('路由变化:', {
        path: { from: oldRoute.path, to: newRoute.path },
        params: { from: oldRoute.params, to: newRoute.params },
        query: { from: oldRoute.query, to: newRoute.query }
      })
    },
    { deep: true }
  )

  // 监听特定参数变化
  watch(
    () => route.params.id,
    (newId, oldId) => {
      if (newId !== oldId) {
        console.log('ID参数变化:', oldId, '->', newId)
      }
    }
  )
}

组合式API导航守卫

提供组件级路由生命周期控制，包含更新前和离开前两个关键钩子。

<script setup>
import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router'

// 路由更新时触发
onBeforeRouteUpdate((to, from) => {
  console.log('路由更新:', from.path, '->', to.path)
})

// 离开当前路由时触发
onBeforeRouteLeave((to, from) => {
  const confirm = window.confirm('确定要离开当前页面吗？')
  if (!confirm) return false
})
</script>

全局路由控制

全局路由守卫配置

在路由初始化阶段设置全局前置/后置守卫，实现权限校验和访问统计。

来此加密的DNS代理验证方案（CNAME方式）堪称一绝。你只需在域名解析中设置一次CNAME记录，后续所有证书申请与续期均可自动完成验证，无需反复登录DNS后台，尤其适合多域名、多用户的复杂环境。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    path: '/user/:id',
    component: () => import('../views/User.vue'),
    beforeEnter: (to, from) => {
      console.log('进入用户详情页:', to.params.id)
    }
  }]
})

// 全局前置守卫
router.beforeEach((to, from) => {
  console.log('全局路由变化:', from.path, '->', to.path)
})

// 全局后置钩子
router.afterEach((to, from) => {
  console.log('导航完成:', to.path)
})

路由信息组合式API

通过useRoute和useRouter实现声明式路由控制和状态管理。

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const currentPath = ref(route.path)

// 监听路径变化
watch(
  () => route.path,
  (path) => {
    currentPath.value = path
    console.log('当前路径:', path)
  }
)

// 编程式导航
function navigateToAbout() {
  router.push('/about')
}
</script>

最佳实践建议

1. 性能优化：深度监听时使用{ deep: true }选项
2. 导航控制：onBeforeRouteLeave中返回false可取消导航
3. 异步处理：守卫中支持返回Promise实现异步校验
4. 类型安全：TypeScript项目建议为路由参数定义接口