vue router(路由)
- vue-router 入门安装
- 用 Vue + Vue Router 创建单页应用。将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
- 动态路由
- 在 vue-router 的路由路径中使用动态路径参数。
- 嵌套路由
- 在路由中配置children ,嵌套的子路由
- 编程式的导航
- 通过 $router 访问路由实例。导航到不同的 URL的函数:router.push()、router.replace()、router.go()。
- 命名路由
- 在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
- 命名视图
- 展示多个同级视图,而不是嵌套展示的时候,可以给每个 router-view 添加 name属性来命名。默认为 default。components 配置组件。
- 重定向和别名
- 在 routes 配置中,redirect 重定向。alias 定义别名。
- 路由组件传参
- 使用 props 将组件和路由解耦:取代与 $route 的耦合。
- 不同的历史记录模式
- history: createWebHashHistory() 开启 Hash 模式,history: createWebHistory() 开启 HTML5 模式
- 导航守卫
- 使用 router.beforeEach 注册全局前置守卫。用 router.beforeResolve 注册全局解析守卫。用 router.afterEach 注册全局后置钩子。用 beforeEnter 进入路由的守卫
- 路由元信息
- 定义路由的时候配置 meta 字段,并且它可以在路由地址和导航守卫上都被访问到。
- 过渡动效
- 用 transition 组件给路由添加过度效果。
- 数据获取
- 导航完成后,在组件的 created 钩子中 watch() 获取数据。在导航完成前,组件的 beforeRouteEnter()、beforeRouteUpdate() 守卫中获取数据。
- 滚动行为
- scrollBehavior() 方法实现期望滚动到哪个的位置
- 路由懒加载
- 异步组件仍然可以在路由组件中使用,但路由组件本身就是动态导入的。
- 导航故障
- 导航故障是一个Error 实例,附带了一些额外的属性。导航是异步的,我们需要 await router.push 返回的 Promise。要检查导航结果的性质,请使用 isNavigationFailure() 函数。检查重定向,使用 redirectedFrom 属性。
- 扩展 RouterLink
- RouterLink组件提供了足够的props来满足大多数基本应用程序的需求,但它并未尝试涵盖所有可能的用例
- Vue Router 和 组合式 API
- 组合式 API 中,获得路由实例 useRouter(),当前路由 useRoute()。更新组件路由钩子 onBeforeRouteUpdate(),离开组件路由钩子 onBeforeRouteLeave()
vue-router路由意思是(single page application单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转