继续上一篇文章的内容，本文主要内容为项目中新闻资讯模块的实现。

新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面。

一、新闻资讯的路由设计

将新闻资讯的标签改为路由：(a标签改为router-link)。

home.vue

    
             
              
      
       News
      
    
     

然后新建一个news.vue单文件组件用于显示新闻列表，并配置到router.js文件中。

二、新闻资讯的页面设计

1、搭建Node服务器用于返回我们需要的页面数据

现在我们的新闻资讯页面时写死的，实际的场景应该是从后台服务器中动态获取，我们可以自己编写一个简单的Node搭建的本地服务器用于满足我们的基本页面数据需求。

这个Node+Express简单搭建的服务器已上传至github，可自行下载运行，运行前先npm install一下。然后就可以使用了。

值得注意的问题：

• 由于是项目本身和服务器是两个不同的域名，存在跨域问题。可使用jsonp的方式进行数据传输，也可以设置header来允许跨域访问：

  res.header('Access-Control-Allow-Origin', '*');

• 使用的是vue-resource获取数据。

其他细节问题代码中均有注释，这里不再赘述。

2、其它问题

• 全局配置Vue.http.options.root

  设置请求的根路径，但是注意请求时路径的写法，如：

  //错误的写法：如果这样写请求的根路径为当前域名this.$http.get('/getNewsList').then( result => {})//正确的写法this.$http.get('getNewsList/').then( result => {})

• scoped配置下的style有时候无法产生效果，就算加上!important标识也无法正常渲染，所以我们常常不再使用scoped属性，但这样容易污染全局样式，所以我们需要模仿scoped属性的实现原理，手动为组件根元素命名一个类作为标识，然后样式都在改标志下进行全局渲染即可。例如新闻详情页的组件代码如下：

  //在根元素增加一个newsInfo类名作为标识
        
      
         
   {
        {newsInfo.title}} 
      
         
          发表时间：{
        {newsInfo.createTime}}        浏览量：{
        {newsInfo.views}}    
      
         
      
         
                  fsafs        fasfdsdafsadf        sadf    
         
        

  然后我们的css属性就可以改为全局样式而不用顾虑污染的情况。

  这里我们可以使用scss语法进行样式书写，更为清晰（需要安装scss对应的loader并配置，请参考）：

  3、效果一览