路由的生命周期 路由钩子函数 导航守卫 路由的懒加载

路由 导航守卫

一、路由生命周期的概念、作用

给一个 前往官网的传送门 → Vue Router

导航守卫分为：全局生命周期、局部生命周期

在这里呢，我们只对于常用的一些守卫进行讲解。
全局：
beforeEach
局部：
beforeRouteEnter :在路由进入时执行
beforeRouteUpdate 在路由更新时执行
beforeRouteLeave 在路由离开时执行

所谓的守卫，其实就是对于路由跳转的前后进行一些验证

二、守卫的参数、使用场景

路由守卫的参数：

• to :Router：即将要进入的目标 路由对象
• from :Router: 当前导航正要离开的路由
• next :Function: 执行下一步。 需要注意的是一定要调用next，否则路由对应的组件不会进行渲染

2.1 、beforeRouteEnter 的基本使用：

场景1：验证用户是否登录
具体操作： 查看```to属性```的meta属性里的某个值，来进行相应的操作
详细解释：此时，相对应的组件还没有进行渲染，所以```无法使用this```

关于beforeRouteEnter有这么两道面试题：
1.在beforeRouteEnter里面能否访问到this的指向？
答：默认是不可以的。如果想要访问到this的指向，那么需要在next这个函数中的参数里获取。这个参数可以是一个函数，这个函数的参数是vm的实例
2.在beforeRouteEnter里面如何跳转到login登陆界面？

上面两道面试题，可以用这么一段代码来进行阐释：

 beforeRouteEnter(to, from, next) {
    if (to.meta.requireAuth) {
      var token = localStorage.getItem("token");
      if (token) {
        next();
      } else {
        next(vm => {
          vm.$router.push({ nae: "login", params: { toPath: to.path } });
        });
      }
    } else {
      next();
    }
  }

这段代码详细的阐释了如何能够使用this，且加强了用户的体验，在登陆之后直接跳转到想要去往的页面。注意一点，此路由守卫，是在beforeCreate之前进行创建的。

场景2 验证用户的vip是否到期

场景3 用户权限验证

场景4 消息提示

2.2 、beforeRouteLeave 的基本使用：

beforeRouteLeave(to, from, next) {
    let flag = confirm("你确定要离开当前页面吗？");
    if (flag) {
      next();
    }
  }

beforeRouteLeave这个路由守卫就比较简单了，但还是要记得调用 next(),否则不会离开当前页面
场景1 ： 用户尚未支付
场景2 ： 答题系统
场景3 ：记录一下历史记录
场景4 ：注销，切换账号

2.3、beforeRouteUpdate 的基本使用：

当路由更新时会触发的一个守卫。
一般情况下，在组件没有经历创建和销毁，但是路由发生改变的时候需要执行的生命周期。

 create() {
    console.log("vue");
  },
  beforeRouteUpdate(to, from, next) {
    console.log("vue");
  }

当页面组件没有发生改变，只是路由变化时，created()是不会再次执行，因为这个生命周期只有在组件创建的时候才会调用。那么如何在组件不销毁的时候，仅仅改变路由就调用created()里的内容呢？ beforeRouteUpdate就是根据检测路由，只要发生变化就会执行

2.4、beforeEach 的基本使用：

作用： 给所有的路由添加守卫

注意：局部的守卫，是在组件内部进行使用，而全局的路由守卫是在路由配置项中去使用的
代码形式如下：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
});

场景 1 ：用户权限的验证 实现代码和局部权限验证一样

三、路由懒加载

1. 通过ES的import方式进行引入
2. 通过require的方式来进行引入

import 方式:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

require 方式：

{
      path: "/",
      //  这里是vue提供的异步组建的方式
      component:(resolve)=>require(['../views/Home.vue'], resolve)
    }