路由的生命週期 路由鉤子函數 導航守衛 路由的懶加載

路由 導航守衛

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

給一個 前往官網的傳送門 → 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)
    }