路由与组建通讯

路由的钩子：（即导航守卫）

1.全局的,

constrouter =newVueRouter({ ... })router.beforeEach((to,from, next) =>{// ...})

2.单个路由独享的

constrouter =newVueRouter({routes: [    {path:'/foo',component: Foo,beforeEnter:(to,from, next) =>{// ...}    }  ]})

3.组件级的。

beforeRouteEnterbeforeRouteUpdate (2.2新增)beforeRouteLeaveconstFoo = {template:`...`,  beforeRouteEnter (to,from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建},  beforeRouteUpdate (to,from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},  beforeRouteLeave (to,from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}}

路由元信息：给路由表每项添加的meta

例如：

{name:'find',        path:'/find',        component:find,        meta:{          title:'我是发现组件',        },

===========================5.16组件通讯==========================================

组件通讯

一、组件：组件是可复用的 Vue 实例二、创建组件：1.全局组件    Vue.component('my-component-name', {// ... 选项 ...})

例如：

import Vue from'vue';//定义一个全局组件    Vue.component('myCom1',{template:"

我是组件{{ count }} click",        data() {return{count:100}        },methods:{            go() {                console.log('我是组件1的go方法');            }        }    });2.局部组件        var ComponentA = {/* ... */}                然后在 components 选项中定义你想要使用的组件：                new Vue({el:'#app'components:{'component-a': ComponentA,          }三、组件通讯  父传子:1.创建两个组件A.vue和B.vue，并在A.vue中引入B.vue，并注册2.在A.vue引入的子组件自身添加要传递的属性                  例如： 3.在B组件中接收A.vue组件中传递过来的值，通过props接收          具体props有两种写法：数组和对象（带验证）            例如：              export default {//props:['yonghu','dizhi','age'],props:{'yonghu':{type:[String]                    },'dizhi':{type:String                    },'age':{type:Number,default:0}                        },  子传父：主要通过事件派发实现，具体通过$emit实现        派发事件：$emit()        接收事件：@事件名戒v-on

兄弟之间：（即非父子）

1.Event Bus:通过一个空的vue（即桥梁）实现兄弟之间数据传递        第一步：创建两个兄弟组件并引入到其他组件中  例如：son1,son2        第二步：创建一个空的vue  例如：bus.js        第三步：分别在两个兄弟组件中引入bus.js        第四步：例如：son1数据发送给son2,在son1通过触发一个事件响应来派发importBusfrom'@/components/common/bus';向son2发送数据methods:{                        goToSon2() {// 派发事件Bus.$emit('ok',this.msg)                                  }        第五步：在生命周期钩子上监听son1派发过来的事件  $on                        created(){//监听事件Bus.$on('ok',(v)=>{// console.log(v);this.name=v;                      })                    }