组件传值

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

1.全局的,

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

2.单个路由独享的

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.组件级的。

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  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:"<div>我是组件{{ count }} <button @click='go'>click</button></div>",
    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引入的子组件自身添加要传递的属性

      例如： <my-com1 :yonghu="user"  :dizhi="address" :age="age"></my-com1>

    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

兄弟之间：（即非父子）