Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 深度集成,可以帮助开发者在 Vue.js 单页面应用(SPA)中管理应用的路由、导航和状态。
Vue Router 中的重要概念
- 路由: 路由是指确定应用程序中某个页面的访问路径的规则。在单页面应用中,页面的切换并不会刷新整个页面,而是通过改变 URL 的哈希值或者使用 HTML5 的 history API 实现。Vue Router 允许开发者通过配置路由规则来定义页面的访问路径,以及这些路径对应的组件。
- 路由器(Router): 路由器是 Vue Router 的核心概念之一。它负责监听 URL 的变化,根据路由规则来匹配相应的组件,并将组件渲染到页面中。Vue Router 的路由器可以通过配置创建,并且可以被绑定到 Vue 实例上。
- 路由表(Routes): 路由表是指所有路由规则的集合。它是一个数组,包含了应用程序中所有可能的路由配置。每个路由配置对象通常包含了路径、名称、组件等信息。
- 路由视图(Router View): 路由视图是指在应用程序的布局中用来展示路由匹配到的组件的区域。通常情况下,路由视图会嵌套在应用程序的布局中,当 URL 发生变化时,路由器会根据路由规则匹配到的组件渲染到路由视图中。
- 导航(Navigation): 导航是指用户在应用程序中切换页面的行为。在 Vue Router 中,可以通过编程式导航(例如调用
$router.push()
方法)或者声明式导航(例如使用<router-link>
组件)来实现页面导航。
routes.push
向路由表中添加新的路由配置。在 Vue Router 中,路由表是一个数组,包含了应用程序中所有路由的配置信息。