为什么使用导航守卫？
在一个SPA应用中，如何改变网页的标题呢？
- 网页标题是通过title来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题并不会改变
- 但是我们恐雨通过JavaScript来修改title的内容window.document.title = '标题'
普通的修改方式
在每一个页面申明一个created函数，在页面创建时对标题进行修改。
created() {
document.title = "主页";
},
这样可以实现更改页面标题的需求，但是为了这一个需求，我们需要在每一个页面中添加这段代码，这样不但增加了代码的重复性，维护的时候还异常麻烦。
全局导航守卫
vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。
这里用到beforeEach来完成标题的修改，beforeEach有三个参数：
- to：即将要进入的目标的路由对象
- from：当前导航即将要离开的路由对象
- next：调用该方法后，才能进入下一个钩子
//router/index.js
//在路由中添加meta.title
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
title: '主页'
},
},
{
path: '/about',
name: 'About',
component: About,
meta: {
title: '关于'
}
}
]
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next()
})
