路由的鉤子：（即導航守衛）

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

兄弟之間：（即非父子）

        1. Event Bus:通過一個空的vue（即橋梁）實現兄弟之間數據傳遞

         第一步：創建兩個兄弟組件並引入到其他組件中  例如：son1,son2
         第二步：創建一個空的vue  例如：bus.js
         第三步：分別在兩個兄弟組件中引入bus.js
         第四步：例如：son1數據發送給son2,在son1通過觸發一個事件響應來派發

                import Bus from ‘@/components/common/bus‘;
                <button @click="goToSon2">向son2發送數據</button>
        
                    methods:{
                        goToSon2() {
                         // 派發事件
                          Bus.$emit(‘ok‘,this.msg)
                
                   }
        第五步：在生命周期鉤子上監聽son1派發過來的事件   $on
        
                 created(){
                        //監聽事件
                       Bus.$on(‘ok‘,(v)=>{
                           // console.log(v);
                           this.name=v;
                       })
                    }

路由與組件通訊