vue rooter 实现原理

Vue Router 实现原理

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。其核心实现原理包括路由匹配、组件渲染和导航守卫等机制。

路由匹配与动态路由

Vue Router 通过解析路由配置生成路由映射表，匹配当前 URL 对应的路由记录。动态路由通过路径参数（如 :id）实现，匹配时提取参数并传递给组件。

const routes = [
  { path: '/user/:id', component: User }
]

路由模式

Vue Router 支持两种路由模式：

• Hash 模式：通过 window.location.hash 监听 URL 变化，兼容性较好。
• History 模式：基于 HTML5 History API（pushState/replaceState），需服务器配置支持。

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes
})

组件渲染

路由匹配后，通过 <router-view> 动态渲染组件。<router-view> 是一个函数式组件，根据当前路由深度和匹配的路由记录渲染对应组件。

<router-view></router-view>

导航守卫

导航守卫用于控制路由跳转，包括全局守卫、路由独享守卫和组件内守卫。守卫函数接收 to、from 和 next 参数，通过调用 next() 决定跳转行为。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    next('/login')
  } else {
    next()
  }
})

响应式路由

Vue Router 通过 Vue 的响应式系统实现路由变化时的自动更新。当前路由信息（如 $route.params）是响应式的，组件会基于此重新渲染。

watch: {
  '$route.params.id'(newId) {
    this.fetchUser(newId)
  }
}

编程式导航

通过 router.push、router.replace 和 router.go 实现编程式导航，内部调用 History API 或修改 hash。

router.push('/user/1')
router.replace('/home')
router.go(-1)

Vue Router 的实现结合了 Vue 的响应式系统和浏览器 History API，提供了灵活的路由管理和组件渲染机制。