今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的） 
收获：（通过今天的学习，学到了什么知识）

1.嵌套路由

const router = new Router({
   mode: 'history',
   routes: [
       {
           path: '/',  //访问路径
           name: 'login', // 路径名
           component: login, //访问的组件,即访问‘/’,它会加载 Layouts 组件所有的内容。
       },
       {
           path: '/admin/:id',  //访问路径
           name: 'admin', // 路径名
           component: admin, //访问的组件,即访问‘/’,它会加载 Layouts 组件所有的内容。
           children: [
               { path: '', name:'welcome', component: welcome },
               { path: 'userList', component: UsersList },
               { path: 'posts', component: UsersList }]
       }
   ]
});

路由报错：[vue-router] Named Route 'admin' has a default child route. When navigating to this named route (:to="{name: 'admin'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.

解决办法：去掉父路由name

2.fetch

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用  XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

fetch规范与jQuery.ajax()主要有两种方式的不同：

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

  fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 promise 对象，resolve 对应请求的 Response。你也可以传一个可选的第二个参数init（参见 Request）。

  一旦 Response 被返回，就有一些方法可以使用了，比如定义内容或者处理方法

   

fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象 :

postData('http://example.com/answer', {answer: 42})
 .then(data => console.log(data)) // JSON from `response.json()` call
 .catch(error => console.error(error))
function postData(url, data) {
 // Default options are marked with *
 return fetch(url, {
   body: JSON.stringify(data), // must match 'Content-Type' header
   cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
   credentials: 'same-origin', // include, same-origin, *omit
   headers: {
     'user-agent': 'Mozilla/4.0 MDN Example',
     'content-type': 'application/json'
   },
   method: 'POST', // *GET, POST, PUT, DELETE, etc.
   mode: 'cors', // no-cors, cors, *same-origin
   redirect: 'follow', // manual, *follow, error
   referrer: 'no-referrer', // *client, no-referrer
 })
 .then(response => response.json()) // parses response to JSON
}

3.vue使用reqwest实现请求

handleTableChange (pagination, filters, sorter) {
               console.log(pagination);
               const pager = { ...this.pagination };
               pager.current = pagination.current;
               this.pagination = pager;
               this.fetch({
                   results: pagination.pageSize,
                   page: pagination.current,
                   sortField: sorter.field,
                   sortOrder: sorter.order,
                   ...filters,
               });
           },
           fetch (params = {}) {
               console.log('params:', params);
               this.loading = true;
               reqwest({
                   url: 'https://randomuser.me/api',
                   method: 'get',
                   data: {
                       results: 10,
                       ...params,
                   },
                   type: 'json',
               }).then((data) => {
                   const pagination = { ...this.pagination };
                   // Read total count from server
                   // pagination.total = data.totalCount;
                   pagination.total = 200;
                   this.loading = false;
                   this.data = data.results;
                   this.pagination = pagination;
               });
           }
       },