（八）vue组件通讯和路由

4：组件通讯的5种方式

    props

    vue的自定义事件

    pubsub第三方库

    slot

    vuex

    props:

        父子组件间通讯的基本方式

        属性值的2大类型:

            通常: 父组件-->子组件

            函数: 子组件-->父组件

                 隔层组件间传递: 必须逐层传递(麻烦)

                 兄弟组件间: 必须借助父组件(麻烦)

        vue自定义事件

            子组件与父组件的通讯方式

            用来取代function props

            不适合隔层组件和兄弟组件间的通讯

        pubsub第三方库(消息订阅与发布)

            适合于任何关系的组件间通讯

        slot

            通讯是带数据的标签

            注意: 标签是在父组件中解析

        vuex

            多组件共享状态(数据的管理)

            组件间的关系也没有限制

            功能比pubsub强大, 更适用于vue项目

5：ajax请求

（1）vue-resource

npm install vue-resource –save

// 引入模块

import VueResource from 'vue-resource'

// 使用插件

Vue.use(VueResource)

// 经过 vue/组件对象发送 ajax 请求

this.$http.get('/someUrl').then((response) => {

// success callback

console.log(response.data) //返回结果数据

}, (response) => {

// error callback}

 

（2）axios

npm install axios –save

// 引入模块

import axios from 'axios'

// 发送 ajax 请求

axios.get(url)

.then(response => {

console.log(response.data) // 获得返回结果数据

})

.catch(error => {

console.log(error.message)

})

 

6：vue-router

1：路由：（1）定义路由组件 （2）配置路由 （3）引入路由

     组件 拆分组件，编写静态组件，动态组件

定义路由组件：（1）注册路由（2）使用路由  <router-link>  <router-view>

 

路由组件：News.vue   Message.vue 

配置路由：

path: '/home',

component: home,

children: [

{

path: 'news',

component: News

},

{

path: 'message',

component: Message

}

]

使用路由  <router-link to="/home/news">News</router-link>

<router-link to="/home/message">Message</router-link>

<router-view></route-view>

 

2：路由组件传递数据

（1）       路由路径携带参数(param/query)

配置路由

children: [{path: 'mdetail/:id', component: MessageDetail }]

路由路径：<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

路由组件中读取请求参数 this.$route.params.id

<router-link :to="`/home/message/detail/${message.id}`"> {{message.title}}</router-link>

（2）缓存路由对象

<keep-alive>

<router-view></router-view>

</keep-alive>

//路由历史记录

(1) this.$router.push(path): 至关于点击路由连接(能够返回到当前路由界面)

(2) this.$router.replace(path): 用新路由替换当前路由(不能够返回到当前路由界面)

(3) this.$router.back(): 请求(返回)上一个记录路由

(4) this.$router.go(-1): 请求(返回)上一个记录路由

(5) this.$router.go(1): 请求下一个记录路由