前言

本文章结合VUE核心技术-尚硅谷的35-44集做的归纳总结。
由于 vue-resource 已经弃用,所以跳过这个部分

axios 基本使用方法

  首先需要执行 npm install axios --save 安装 axios 库

axios 使用

  通过上述的代码就可以实现数据获取

获取github上v开头赞数最高的项目地址

axios 抓取github用户信息

体验一下

  通过 https://api.github.com/search/users?q=username github提供的API可以自由获取用户的基础信息。

Element & Mint UI 库

  来自饿了么前端团队开发的 Vue 组件样式库
  可以去官网支持一波

Vue Router 基本用法

  注意路由和路由器是不一样的
  路由是键值对 的 映射关系
  路由在后端用来处理回调函数,在前段用来处理组件显示

简单路由效果

  路由配置

vue router 定义

  在Vue实例中进行注册

引用路由

  在页面元素中定义路由

引用路由

Vue Router 嵌套路由

  通过children实现路由嵌套

嵌套路由

  在HTML中调用路由相应的UI

嵌套路由

  通过 keep-alive 缓存路由中的数据,切换路由的时候相应的数据不丢失

嵌套路由

Vue Router 传递数据

路由路径携带参数

  在路由路径上加上 :id 来获取数据

传递数据

  相应在地址上传入对应的变量数据

传递数据

  通过 this.$route.params 可以获取到路由设置的变量,通过 .id 就可以获取路径传入的数据

传递数据

  通过监听 $route 的数据可以直到路由发生了改变

传递数据

属性携带数据

  类似于组件传递数据一样

传递数据

编程式路由导航

  简单的理解就是用自定义的js函数来改变路由地址

传递数据
传递数据
传递数据