vue基础 - 14 （路由守卫：router.beforeEach全局前置守卫、beforeRouteUpdate组件守卫）

1、全局前置守卫：非登录状态无法进入某些页面

        router.beforeEach((to, from, next) => {  } 

        to：路由即将前往…

        from：路由当前在…

        next( )：调用后前往下个页面

        可以再meta中设置页面的title，在路由守卫设置document.title = to.meta.title;

//router/index.js中书写

const routes = [
  {
    path: "/about",
    name: "About",
    meta: {
      keepAlive: true,
      title: "关于",
    },
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/simi",
    name: "SiMi",
    meta: {
      requireLoginState: true,
      title: "私密页面",
    },
    component: () => import(/* webpackChunkName: "simi" */ "../views/SiMi.vue"),
  }
];

router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  //判定权限: 只有登录之后才能访问 simi 页面
  let isLogin = false; //假设当前非登录状态
  // 如果要前往的页面需要登录状态 并且 当前登录状态是假
  if (to.meta.requireLoginState && isLogin == false) {
    alert("当前没登录, 无法访问 私密 页面"); 
    next("/"); //不允许跳转, 直接回到首页
    return;  //阻止下方的 正常跳转执行
  }
  next();
});

2、组件守卫：监听路由参数变化

  // 组件独享的 路由监听
  beforeRouteUpdate(to, from, next) {
    console.log("Products组件路由将要变为:", to);
    console.log("Products组件路由当前值:", from);
    next();
  },
  //watch: 万能方法
  watch: {
    // 属性名 就是要监听的属性
    "$route.params"(newValue, oldValue) {
      console.log("监听器newValue:", newValue);
      console.log("监听器oldValue:", oldValue);
    },
  },