vue+webpack app项目(6)

step6 利用vue-resource 获取数据

• 将首页的数据变为动态获取的
• 首先定义一个json文件，注意格式，否则解析不了会为null，建议可以把自己的json文件在线检测一下
  • news.json

Paste_Image.png

• 这个文件放在static/data，要在app.js中做相应的配置

  import VueResource from 'vue-resource'

Paste_Image.png

• 参数解释：
• proces.env.NODE_ENV 在vue-cli搭建的时候bulid文件里面配置好的可以去研究一下
• Vue.http.options.emulateJSON = true;

If your web server can't handle requests encoded as application/json , you can enable the emulateJSON option. This will send the request as application/x-www-form-urlencoded MIME type, as if from an normal HTML form.
--- 如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

• 然后使用$http去获取数据，返回值response，利用$set设置 Vue 实例的属性值,也就是之前的假数据task1

Paste_Image.png

• task1数据改变就会引起视图的变化，现在效果是这样的，那么改变一下以前下拉push进去的假数据

Paste_Image.png Paste_Image.png

• 先每次刷新都能获取一次数据了，基本模拟了后端传输数据的效果

点击进入详情页面

• 希望每个列表都能点击去看文章详情，那么要监听一下click事件，在子组件中,找到CardCon.vue

  <div class="card" v-on:click="goDetail">
        <slot></slot>   
    </div>

• 定义goDetail方法，并且使用dispatch冒泡的父组件,传入当前列表的索引，方便获取数据

       methods:{
             goDetail (){
                this.$dispatch('GoDetailRouter', $(this.$el).index())
              }
        }

• $emit $dispatch $brocast

  
  Paste_Image.png

Paste_Image.png

• 在父组件中的events中监听子组件的事件，msg就是传入的参数，利用路由go方法跳转到详情页

events :{//监听子组件
      GoDetailRouter (msg){
           router.go({
            name: 'detail', 
            params: {
              Lcontent:encodeURIComponent(this.$data.task1[msg].Lcontent)

            }
          });
      }
  }

router.js
 '/home/detail/:Lcontent': {
            name:'detail',
            component (resolve) {
            require(['./views/detail'], resolve)
          }
        }

• 这里的Lcontent是传入的参数,我这里传入的是详情的文字，实际开发一般是传一个id然后从后台获取相应的数据
• 增加detail.vue，要了解router钩子函数才能了解下面这一段代码

route: {
          data: function (transition) {

           this.$set('Lcontent',decodeURIComponent(this.$route.params.Lcontent)); 
          }
        }

切换钩子子函数

• 由于如果我在ready中去获取参数，因为keep-alive将组件缓存所以只会执行一次，但是router的data切换钩子会在每次路由切换的时候调用，保证了当前的参数是最新的

Paste_Image.png

• 今天用到的关于router 和 resource，网上的资源真的很少，大多是直接翻译了文档，连个demo都没有，各种摸索去试，心好累，大家觉得有帮助的，请在github上给个小星星吧，https://github.com/sally2015/vue-project