Vue Router 简介_简单来说_提供导航守卫在页面切换时做权限验证或数据加载

作者：机器人技术佬 | 发布时间：2025-06-20 |

Vue Router 是 Vue.js 应用的官方路由管理器。简单来说，它就像一个导航系统，能让你的单页应用（SPA）像多页面应用一样流畅地在不同页面间切换。

Vue Router 有四大核心功能：

路由规则就像一张地图，告诉系统哪个 URL 对应哪个 Vue 组件。

概念	描述
路由表	一个数组，包含多个路由对象。
路由对象	定义一条路由规则，包含 URL 路径和对应的 Vue 组件。

Vue Router 提供了各种方法来控制页面跳转和获取当前页面信息。

方法	描述
导航方法	如 `router.push('/about')` 可以跳转到 "/about" 页面。
获取路由信息	如 `router.currentRoute` 可以获取当前路由对象，包含路径、参数、查询等信息。
动态路由参数	通过设置路由参数，可以在同一组件中根据不同参数展示不同内容。

导航守卫就像路障，确保在页面切换时进行权限验证或数据加载。

类型	描述
全局守卫	如 `router.beforeEach` 和 `router.afterEach`。
路由独享守卫	如 `beforeEnter`。
组件内守卫	如 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave`。

动态路由匹配让路由更灵活，可以根据 URL 路径中的参数动态加载内容。

概念	描述
动态路由参数	在路由路径中使用冒号 `:` 定义参数，如 `/user/:id`。
获取路由参数	在对应组件中可以通过 `this.$route.params` 获取路由参数。
嵌套路由	通过在父路由组件中定义子路由，实现更复杂的视图结构。

Vue Router 是一个强大的工具，可以帮助你轻松实现单页应用。通过合理使用它的功能，你可以创建出功能丰富、用户体验良好的应用。