运用Vue路由中的afterEach，进行页面的公共头部的信息匹配

前几天在做公共头部的时候，我们可以根据头部的引用，将公共的头部组件，引入到相应的页面中，只需改变公共头部的展示信息。例如：是首页我们就展示“首页“，是个人中心就展示个人中心。
但是，所暴露的问题就是，我们必须每一个页面都必须引用这个公共的头部组件。很是繁琐！！所以必须寻求解决办法。
最终解决办法就是，在最外层的App.vue的文件中直接导入公共的头部组件，这样每一个页面都能显示公共的头部，岂不快哉。可是每个页面需要展示不同的页面头部显示，这就得考虑一下我们这里所提及的全局导航。

视图层

<template>
  <div id="app">
    <GameHeader class="title">{{navTitle}}</GameHeader>
  </div>
</template>  


这里我们只需在App.vue的逻辑层，在mounted中
data(){
    return{
        navTitle: "首页",//设置默认值
    }
}

mounted(){
    let self =this 
    this.$router.afterEach((to,from)=>{
        self.navTitle = this.(to.meta.title) || "";
    });
}

这里我们的小胡子语法里的navTitle的值是我们路由全局导航的值。
当然想要配置相应的值，我们必须给出相应的值。
所以在我们的router文件的index.js文件必须在路由中给出相应的值。
具体代码如下：

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/home",

    },
    {
      path: "*",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home,
      meta: {title: "首页"}
    },
    {
      path: "/help/:id",
      component: Help,
      meta: {title: "帮助"}
    },
 }

这里的meta的值就是我们根据路由变化而改变的公共头部组件的信息。

在这里值得一提的是。
我们这里采用是afterEach，而并非是beforeEach，这是因为after 钩子没有 next 方法，不能改变导航，代表已经确定好了导航怎么去执行后，附带的一个执行钩子函数。简单的说就是：我只需要路由改变了头部的内容，仅此而已。
而beforeEach是我们需要每次每一个路由改变的时候都得执行一遍。

this.$router.beforeEach((to,from,next)=>{

    //它的三个参数：
    //to: (Route路由对象)  即将要进入的目标 路由对象       to对象下面的属性： path   params  query   hash   fullPath    matched   name    meta（在matched下，但是本例可以直接用）

    //from: (Route路由对象)  当前导航正要离开的路由

    //next: (Function函数)   一定要调用该方法来 resolve 这个钩子。  调用方法：next(参数或者空)
});
this.$router.afterEach((to,from)=>{
    //切记在此之中，没有next方法。不能改变导航。
});