路由（router）守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

//创建并暴露一个路由器
const router = new VueRouter({
  routes: [
    {
      name: "guanyu",
      path: "/about",
      component: About,
      meta: { isAuth: true, title: "关于" }
    },
    {
      name: "zhuye",
      path: "/home",
      component: Home,
      meta: { title: "主页" },
      children: [
        {
          name: "xinwen",
          path: "news",
          component: News,
          meta: { isAuth: true, title: "新闻" },
          beforeEnter: (to, from, next) => {
            //独享路由组件
            if (to.meta.isAuth) {
              if (localStorage.getItem("school") === "yu1") {
                next();
              } else {
                alert("无权限查看");
              }
            } else {
              next();
            }
          }
        },
        {
          name: "xiaoxi",
          path: "message",
          component: Message,
          meta: { isAuth: true, title: "消息" },
          children: [
            {
              name: "xiangqing",
              path: "detail",
              component: Detail,
              meta: { isAuth: true, title: "详情" },

              //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
              // props:{a:1,b:'hello'}

              //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
              // props:true

              //props的第三种写法，值为函数
              props($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title,
                  a: 1,
                  b: "hello"
                };
              }
            }
          ]
        }
      ]
    }
  ]
});
独享路由守卫;

//全局前置路由守卫---每次路由切换之前调用、每次路由初始化被调用
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) {
    if (localStorage.getItem("school") === "yu") {
      next();
    } else {
      alert("无权限查看");
    }
  } else {
    next();
  }
});
//全局后置路由守卫---每次路由切换之前调用、每次路由初始化被调用
router.afterEach(to => {
  if (to.meta.title) {
    document.title = to.meta.title;
  } else {
    document.title = "主页";
  }
});
export default router;

内嵌式路由守卫
  //通过路由规则，进入该组件是被调用
  beforeRouteEnter(to, from, next) {
    if (to.meta.isAuth) {
      if (localStorage.getItem("school") === "yu1") {
        next();
      } else {
        alert("无权限查看");
      }
    } else {
      next();
    }
  },
  //通过路由规则，离开该组件是被调用
  beforeRouteLeave(to, from, next) {
    // ...
	next()
  },