Vue路由

众所周知，在我们访问页面的时候，会有一些页面不会让我们去访问，比如你去访问支付宝，微博，一系列的平台里，有点页面可以去看，但是有的页面不会让你去看，就比如你没有登录，但是你想看个人主页的信息，那你就进不去，我们需要这样的功能就要用到路由守卫，所以我们得介绍一下路由守卫。

》》》》》》》》》》

路由守卫

1. 作用：对路由进行权限控制

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

3. 全局守卫：

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to, from, next) => {
     if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
       if (localStorage.getItem('name') === '乔璐瑶') {  //定义全选控制的具体规则
         next()
       } else {
         alert('抱歉你没有权限！')
       }
     } else {
       next()
   
     }
   
   })
   
   //全局后置守卫：初始化时执行/每次路由切换后执行
   router.afterEach((to, from) => {
     document.title = to.meta.title
   })
   

4. 独享守卫

   beforeEnter(to,from,next){
   					 if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
       if (localStorage.getItem('name') === '乔璐瑶') {  //定义全选控制的具体规则
         next()
       } else {
         alert('抱歉你没有权限！')
       }
     } else {
       next()
   
     }
   }
   

5. 组件内守卫

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

   在我们切换页面的时候路径上会有#号，那是因为路由器有他自己的工作模式，#号后面的内容，是不会发送给服务器的，不然你在路径后么=面写了一大堆，都要发送给服务器那服务器根本就没有这些东西，当然找不到

路由器的两种工作模式

1. 对于一个url来说，什么是 hash值？——#及其后面的内容就是hash值

2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

3. hash模式：

   1. 地址中永远带着#号，不美观
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   3. 兼容性好

4. history模式：

   1. 地址干净，美观
   2. 兼容性和hash模式相比略差。
      e.getItem(‘name’) === ‘乔璐瑶’) { //定义全选控制的具体规则
      next()
      } else {
      alert(‘抱歉你没有权限！’)
      }
      } else {
      next()

   }

   })

   //全局后置守卫：初始化时执行/每次路由切换后执行
   router.afterEach((to, from) => {
   document.title = to.meta.title
   })

5. 独享守卫

   beforeEnter(to,from,next){
   					 if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
       if (localStorage.getItem('name') === '乔璐瑶') {  //定义全选控制的具体规则
         next()
       } else {
         alert('抱歉你没有权限！')
       }
     } else {
       next()
   
     }
   }
   

6. 组件内守卫

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

路由器的两种工作模式

1. 对于一个url来说，什么是 hash值？——#及其后面的内容就是hash值
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3. hash模式：
   1. 地址中永远带着#号，不美观
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   3. 兼容性好
4. history模式：
   1. 地址干净，美观
   2. 兼容性和hash模式相比略差。
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题