Vue:牛刀小试 Vue社区API

前言

学习Vue如果连官方社区的API都没有使用过，那么根本算不上Vue开发者，趁着有空，拿社区的API练习一下，主要是练习vuerouter以及axios两款插件的使用，先上图，后面会介绍遇到的坑

简洁（jian lou）的主页

详情页

Github地址

遇到的问题

1. 官方社区日期显示的是 XX天以前，这里我留了filter接口，暂时没想到处理的方法，管他呢，不要在意细节
2. 详情页上面有一排 精华 问答等标签，支持分类选择。返回的JSON里面其实就有tab，get参数也可以选择获取哪些标签，小问题
3. 详情页的html内容经过处理过，暂时不知道用的什么工具，里面的图片链接用的是社区服务器资源，因此本地会以localhost:8080的地址请求，当然请求不到

开发中的坑

axios

项目用的是经过深度封装的axios（源码在我的另一篇文章《实用主义：Promise让异步回调更加优雅》里有，当然项目里有更详细的）。

先看看官方社区的参数

params.png

最早我是这样调用的

ajax.get('http://www.vue-js.com/api/v1/topics', {limit: 20})
    .then(res => {
      if (res) {
        return res.data;
      }
    })
    .then(data => {
      this.topicList = data;
    })
    .catch(err => {
      console.log(err);
    });

注意这里{limit: 20},

ajax.png

封装的config也是一个对象，但是这样是没有办法响应的。应该加个params

这样ajax.get('http://www.vue-js.com/api/v1/topics', {params: {limit: 20}})

一定要加一个params标记为config，入门的同学需要特别注意

vue-router

1. route和router的区别 router：在实例中是this.$router，指的是vue-router这个对象，通过它来进行导航，比如this.$router.push(),this.$router.repalce()进行编程式导航； route: 浏览器当前地址，从中去取params信息
2. 动态路由匹配 先看看我的路由表

routes.png

（注意routes是一个数组，别写成对象了）

根目录显示组件Home，然后通过编程导航进入到子主题

注意这里的path,'/topic/:id'，：id表示这是一个params属性，即任何一个匹配到/topic/路径的路由都会显示ItemDetail这个组件，：id是组件用来获取参数的。

组件中使用this.$route.params获取。最早拼这个路径我是真的直接用字符串拼的

拼接路径.png

我真的就是这么天真硬拼接的，但是路由表仍然能获取到params，但是我觉得太丑。强迫症没办法，改成了

第一次修正.png

通过路径+params获取，但是这样params就获取不到id属性了，为了美观再改

最终.png

注意在注册路由的时候我给这张路由表增加了name属性，通过这样方式传params，相当优雅。这样也能正常使用浏览器的后退（history.go(-1)），这就是动态路由匹配需要注意的地方了，恩，相当优雅（/滑稽）

最后

这个Demo大概就这个样子了。目的在于练习axios和vue-router，完全自己写样式感觉有点傻，实际项目中最好套现成的，推荐Vonic移动端见过最漂亮的方案和ElementUI PC端方案。

题外话：简书也看过不少同学分享过Vue项目，做的内容也比我精彩很多（我主要是练习一两个插件为主，没想过全部写完）。但是往往丢一个github地址就跑了。CodeReview其实是编写代码中很重要的一个环节，在分享项目的过程中，讲解一下遇到的坑，既方便于后来者避免这些坑，也进一步加深了自己的印象，比如今天遇到的坑，通过写完这篇文章后我绝对不会犯第二次/滑稽

就是这样：）