Vue Router 是干什么的，原理是什么？

Vue Router 是什么？

Vue Router 是 Vue.js 官方提供的前端路由管理库，用于构建单页应用（SPA, Single Page Application）时，实现页面之间的导航切换。
简单来说：Vue Router 就是让你“点击页面链接时，不刷新页面，也能切换不同的组件/视图”。

举个例子：

{
  path: '/user',
  component: UserView
}

当你访问 /user 时，Vue Router 会自动把 替换成 UserView 组件内容，不用刷新页面。

Vue Router 的作用

功能	说明
页面导航	支持 <router-link> 标签点击跳转
动态路由	支持参数，如 /user/:id
嵌套路由	支持组件嵌套页面结构
路由守卫	支持进入/离开前的权限判断、跳转控制
编程式导航	通过 JS 控制跳转 router.push() 等
历史记录管理	支持 history 或 hash 模式切换

Vue Router 的原理

Vue Router 的核心原理是 监听浏览器地址栏 URL 的变化，然后动态地渲染对应的 Vue 组件，并不刷新页面。

两种常见模式

模式	说明	URL 形式	特点
hash 模式	使用 # 号	/#/home	兼容性好，不刷新页面
history 模式	使用 HTML5 History API	/home	地址更美观，但需服务端支持重定向

工作流程示意图：

用户点击 router-link 或执行 router.push()
      ↓
Vue Router 监听到 URL 变化
      ↓
匹配对应的路由规则（path -> component）
      ↓
把 <router-view> 替换为对应组件
      ↓
页面内容切换，但不刷新页面

示例代码

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- App.vue -->
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

<router-view></router-view>

总结：Vue Router 是 Vue 的导航中枢，它让你在单页面应用中实现“像多页面一样”的体验，同时不刷新页面。