球王会:Vue学习总结18通过Vue路由和动态传值实现

球王会接上篇《17.Vue实现动态路由传值》

上一篇我们讲解了如何通过类似Get请求传值的方式，给路由传递参数，本篇我们来根据上两篇学习的知识，来编写一个真正的新闻查看模块。

本系列博文使用的Vue版本：2.6.11

球王会一、需要调用的API

这里使用“PhoneGap中文网”提供的免费app的API进行测试。

1、新闻列表API

球王会url:

其中a指定接口的名字，这里接口名为“getPortalList”。catid为新闻每页的加载量，page为新闻页数。

效果（工具为PostMan）：

用浏览器直接访问会出现类似“\u3010\u56fd”的16进制Unicode码，可以转义成中文：

2、新闻详情API

url:

其中a指定接口的名字，这里接口名为“getPortalArticle”。aid为新闻的id。通过该链接可以跳转至新闻的详情页面。

效果（工具为PostMan）：

用浏览器直接访问会出现类似“\u3010\u56fd”的16进制Unicode码，可以转义成中文：

其中类似“\u3010\u56fd”的是16进制的Unicode码，可以转义成中文。

准备好API后，我们开始编写新闻页面。

二、编写新闻列表页 1、配置Vue路由

路由的基础配置这里就不详细说了，和之前的一样，步骤为：

（1）安装并引入vue-router

（2）配置路由（创建组件并引入组件、定义路由、创建和挂载根实例）

（3）引用并访问路由内容（路径访问、超链接挂载）

具体可查看之前的博文《【Vue学习总结】16.Vue中的路由以及默认路由跳转》第2段。

这里记得把原来News新闻的路由新闻列表页面，由带参（aid）修改为不带参数，一是因为编写的样例不需要再区分新闻类型，二是方便我们编写本节样例：

//2、定义路由
const routes = [
  {path:'/helloWorld',component: HelloWorld},
  {path:'/news',component: News}, //{path:'/news/:aid',component: News},
  {path:'/content/:cid',component: Content},
  {path:'/',component: HelloWorld}
]

2、请求网络数据的准备

因为我们需要请求网络数据，需要类似ajax的请求，这里我们还是使用之前用的vue-resource（vue-resource是Vue.js的一款插件新闻列表页面，它可以通过XMLHttpRequest或JSONP发起请求并处理响应），使用方法和ajax类似，之前也说过，这里不再展开，具体可以查看之前的博文《【Vue学习总结】12.使用vue-resource请求网络数据》。

3、请求新闻列表并展示

首先清空原来的News.vue新闻页面，准备编写代码：

首先我们在methods中添加请求网络数据的代码，获取API中的新闻列表：

此时先打印请求到的数据信息，看看对不对：

发现可以请求到数据，然后我们根据API结果的格式得出，response.body.result是我们需要的列表数据集（其中title是新闻标题），我们把该数据集给list数组，然后在中遍历该数组，完整代码：

此时我们就实现了新闻列表的效果，结果：

三、为新闻添加跳转详情

上面实现了新闻的列表展示功能，但是点击超链接还跳不到新闻的详情页，我们来添加一下。

这里我们每个新闻链接的是原来的“/content/:cid”路由，其中的cid就是新闻的id：

{{item.aid}}--{{item.title}}

我们来到Content页面，将原来的静态数据清空，使用第二个API来获取新闻的详情信息，并反馈到页面。

这里我们先访问其中一个新闻，观察其json结构新闻列表页面，可以看到response.body.result[0]下面是我们需要的数据，title是新闻名，content是新闻内容：

那我们就根据这个结构，解析详情请求结果，并展示在页面上。

完整代码：

效果：

四、添加样式

写完的页面效果不好看新闻列表页面新闻列表页面，我们可以编写css样式，来使页面更加的好看。我们在工程的assets文件夹下创建一个css文件夹，创建一个basic.css，用来存放公共样式：

在basic.css中编写一些基础样式：

然后在main.js中引入该公共css：

import './assets/css/basic.css';

然后我们使用谷歌浏览器，切换到手机的查看窗口，可以看到样式已经变的好看一些了：

我们再给根组件App.vue加一些内部样式，顺便把首页和新闻的超链接加上：

效果：

此时观察我们的详情页，发现内容展示宽度太大：

这时我们需要把它缩到一个手机屏幕的宽度，所以需要修改一下Content页面的样式：

效果（图片和屏幕同宽）：

至此，我们的新闻模块样例编写完成。

参考：

球王会《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》