vue-router路由守卫与工作模式

路由守卫

1. 作用:对路由进行权限控制
2. 分类:全局守卫/独享守卫/组件内守卫
3. 全局守卫:

//全局前置路由守卫:在每一次路由切换之前都会帮你调用
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) {
    console.log("前置路由守卫");
    //判断是否鉴定权限
    if (localStorage.getItem("school") === "xueqianduan") {
      next(); //放行
    } else {
      alert("学校名称错误,无权限查看");
    }
  } else {
    next();
  }
});
//全局后置路由守卫:在每一次路由切换之后都会帮你调用
router.afterEach((to, from) => {
  console.log("后置路由守卫");
  document.title = to.meta.title || "默认title";//修改网页的title
});

4. 独享守卫:

          beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) {
              //判断是否鉴定权限
              if (localStorage.getItem("school") === "atguigu") {
                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模式相比略差
   3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题