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
网友评论