这个是用来实现一个需求而设计的一种方法，首先来看一下这个需求内容。
需求：
点击某组件时，要求对应的网页index.html的<title> 更改为对应组件的名称，例如，点击首页，则标题首页；点击用户，则切换到用户。
不用全局导航守卫的实现思路：
利用Vue声明周期函数created()
什么是Vue声明周期函数？
其实，就是回调函数，你每次调用new Vue时，或者每当一个组件被编译到创建时，都会经过一系列的初始化过程，也就是创建过程。
在这个过程中，会执行很多初始化函数，但是，这个创建过程也提供了一些特殊的回调函数，让开发者使用，常用的有
created() 创建组件后，就回调
mounted() 模板挂载到DOM中，就回调
updated() 界面发生刷新后，就回调（例如，模板内的数据改变）
每个.vue组件都有自己的name，那么就给每个组件添加一个created函数。函数内使用document.title = ’ ';
即
created(){ document.title=‘档案’; }
虽然，这种代码可以实现需求，但是太繁琐，要在每个.vue组件都写created()，因此，这时需要一个全局监听函数，它去监听URL的改变，并对应做出title的改变。
全局导航守卫
在创建vueRouter对象时，重写一个router.beforeEach()函数
beforeEach( (to, from, next) => { 页面跳转后的行为 } )
to/from都是route的路由规则对象{}类型，为了让它能监听到路由的切换，必须先在每个route规则对象内定义一个title元数据，
定义方法：
{ path:'/home', meta: { title :'首页' }, component: Home }
随后，就可以在beforeEach的回调函数内修改title
router.beforeEach((to, from, next) => {
console.log(from.path);
document.title = to.meta.title;
next();//必写，不然组件的router-view无法显示
});
注意：有时，首页会用默认路由，导致了进到host.com后，路由直接变为host.com/home/news，这个时候，如果没有在/home/news下面配置相关的meta数据，则title会变为undefined。
此时，不能在meta内找title，要去to.matched.meta.title找；
为什么？
matched是route对象内的一个数组，它存储了当前{ }所有的路由规则，包括嵌套的路由，因为/home/news是嵌套，所以这个match数组内是这样排列的：
matched[0] = { path: '/home' , meta : { titlel: '首页' } }
matched[1] = { path: '/home/news' , }
因此，每次你调用document,title = ；时，应该使用最高的嵌套路由对象，即.beforeEach( ()=>{ document.title = to.matched[0].meta.title;})
其他导航守卫
在Vue官网可以找到组件守卫，单独路由守卫（{ path,beforeEach(){}}）的案例。
这里补充一下，还有router.afterEach( (to, from) => { 行为，不调用next()});
这里的after/before是指跳转路由对象 *之后/之前“，即页面发生跳转的状况，这个根据业务需求灵活使用即可。