路由守卫，可以想象为古代御前侍卫，路由守卫，则是对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

1.全局前置-路由守卫

作用：主要用来鉴权
用户点击导航区，随后引起路径的改变，前端路由器监测到，进行规则的匹配，在合适的位置呈现组件。

调用时机：初始化时被调用，每次路由切换之前调用

写法:

router.beforeEach((to, from, next) => {
  // 判断当前路由是否需要进行权限控制
  if (to.meta.isAuth) {
    // 权限控制规则
    if (localStorage.getItem('token')) {
      next() // 放行
    }
  } else if (to.path == '/home') {
    next()
  } else {
    console.log('暂无权限')
  }
})

to：即将要进入的目标路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子

2.全局后置守卫

主要作用：变更页签标题
调用时机：初始化被调用，每次路由切换之后调用

router.afterEach((to, from) => {
  document.title = to.meta.title
})

可以在钩子当中定义一些标题，利用meta来定义

const routes = [
  {
    path:'/index',
    component:Home,
    meta:{
      title:"首页"
    }
  },
  {
    path:"/about",
    component:About,
    meta:{
      title:"关于"
    }
  }
]
// 利用导航守卫。修改我们的标题
router.afterEach((to, from) => {
  document.title = to.meta.title
})

3.独享守卫

对某一个路由单独进行控制的守卫

const routes = [
  {
    path: "/system",
    name: "System",
    component: () => import(/* webpackChunkName: "system" */ "@/views/System"),
    beforeEnter: (to, from, next) => {
      if(to.meta.isAuth) {
        if(localStorage.getItem("token")){
          next()
        }
      } else {
        console.log("暂无权限");
      }
    }
  },
]

4.组件内路由守卫

beforeRouteEnter、beforeRouteLeave

调用时机：通过路由规则，beforeRouteEnter进入该组件时被调用，beforeRouteLeave离开该组件时被调用

// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from,next){

},
// 进入守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){

}

5.keep-alive遇见vue-router

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

• include：字符串或正则表达，只有匹配的组件会被缓存
• exclude：字符串或正则表达式，匹配的组件都不会被缓存

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配的视图组件都会被缓存

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

6.路由器的两种工作模式，history模式与hash模式

hash模式：

1. 地址永远带着#号，不美观

2. 如果以后将地址通过第三方手机app分享，app校验严格，则地址会被标记为不合法

3. 兼容性好。

history模式：

1. 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

2. 当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id

3. 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

4. 地址干净，美观

5. 兼容性和hash模式相比略差，IE9不兼容（可使用强制刷新处理）

6. 应用部署上线时，需要后端人员支持，解决刷新页面服务端404问题。

const router = new VueRouter({
  routes,
  mode:'history'
})