导航守卫

1.为什么要使用导航守卫？
导航守卫是为了方便在路由跳转的过程之中可能需要监听路由的进入和离开的
vue-router提供的beforeEach和afterEach钩子函数，它们会在路由即将改变前和改变后触发。
2. 导航守卫的使用:
我们可以利用beforeEach来完成标题的修改

• 首先，我们可以在钩子当中定义一些标题，可以利用meta来定义
• 其次，利用导航守卫，修改我们的标题
  导航钩子的三个参数解析
  { to : 即将要进入的目标的路由对象
  from: 当前导航即将要离开的路由对象
  next: 调用该方法后，才能进入到下一个钩子
  }

const routes = [
  { 
    path: '/home',
    component: Home,
    meta: {
       title: '首页'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
       title: '关于'
    }
  }
]

 router.beforeEach((to, from, next)=> {
    window.document.title = to.meta.title;
    next();
 })

导航守卫的分类

1. 全局内的守卫(beforeEach/ afterEach)
2. 路由独享守卫(beforeEnter/ afterEnter)
3. 组件内的守卫

具体可以去官网学习

keep-alive是vue内置的一个组件，可以使得被包含的组件保留状态，或者说避免被重新渲染。

• 它们有两个非常重要的属性：
• include: 字符串或者正则表达，只有匹配的组件会被缓存
• exclude: 字符串或正则表达式，任何匹配的组件都不会被缓存
  router-view也是一个组件，如果被直接包含在keep-alive里面，所有路径匹配到的视图组件都会被缓存。

<keep-alive>
  <router-view>
     <!--所有路径匹配到的组件都会被缓存-->
  </router-view>
</keep-alive>