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，提供了灵活的路由管理和组件渲染机制。
