路由懶載入的配置：

const Home= () =>import('../components/Home') //使用ES6中的路由懶載入的方式
const About= () =>import('../components/About')
const User= () =>import('../components/User')

const HomeNews=()=>import('../components/HomeNews')
const HomeMessage=()=>import('../components/HomeMessage')

const Profile=()=>import('../components/Profile')

配置完成後，根據不同元件生成對應的js檔案，在載入對應元件的同時載入自己的js檔案，這樣就做到了一個單個活躍元件載入的情況，對效能比較好。

關於全域性導航守衛，和後置鉤子

見vue原始碼：

beforeEach是路由跳轉前執行的，afterEach是路由跳轉後執行的

通過路由來切換對應元件時，各元件是會被重新建立的，也就是會呼叫create函式（元件建立的時候呼叫）和destroyed函式（元件銷燬的時候呼叫）。

reoute-view，是viewrouter中的一個元件，而keep-alive是vue中的一個元件。keep-alive可以使被包含的元件保留狀態，不會被重新渲染。

需要注意的是，當一個route-view在使用keep-alive包住的時候，元件狀態是會被快取的，create函式只會呼叫一次，此時是不會呼叫destroyed函式的，既然不會呼叫那麼這個元件的狀態是不會被重新建立的，這樣一來對效能的也是比較好，總而言之就是一個對元件進行快取的一個東西。

還有兩個函式，acivated函式（元件處於活躍時呼叫），deactivated函式（元件處於不活躍時呼叫）。這裡個函式只有在存在keep-alive的時候才會被呼叫。

那麼有可能存在另外一個需求：就是我希望有的元件時需要不斷重新建立然後被銷燬的。

那麼我們就可以在keep-alive基礎上新增一些屬性就可以了。

此時，這個交Profile的元件就不會被keep-alive快取了。

這樣這兩個元件都不會被快取

vue在單個元件style中引入css檔案可以通過@import "路徑" 這種方式去引入

常見錯誤：在router-view顯示不出來的時候，檢視路由元件註冊中component不能有s！！！

瀏覽器報錯：ncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/h

解決辦法：加上這一行程式碼：this.$router.replace('/location').catch(err=>{console.log(err)})

在腳手架2中為路徑新增別名：

不過在使用的時候需要咋前面加個波浪線。並且要重新dev一下

Vuex：

手寫一個vuex，也就是存在一個變數資料，所有元件共享這個資料。注意：這個資料並不是響應式的，之所以在vue中的data是響應式的是因為它依賴於vue底層的一個響應式系統。

            const sharpObj={
                name:'hc'
            }

            Vue.Prototype.sharpObj=sharpObj;

            Vue.component('Cpn2',{
                this.sharpObj.name
            })

            Vue.component('Cpn1',{

            })

            const app = new Vue({
                el:"#app",
                
            })    

建立vuex的步驟，先再src中建立store資料夾，在資料夾裡面建立index.js，程式碼如下：

import Vue from 'vue'
import Vuex from 'vuex'

//1.安裝外掛，底層會去執行vue.install方法
Vue.use(Vuex)

//2.建立物件
const store= new Vuex.Store({


})

//3.匯出Store物件
export default store

掛載到main.js

掛載上去之後，它會通過 Vue.prototype.$store=store。而store這裡面的值都可以讓所有元件去共享，vuex管理這些store裡面的值。

綜上所述，所有的元件都有一個$store物件

通過this.$store.commit去提交一下，然後呼叫commit傳過去再vuex那邊定義的方法

<template>
  <div id="app">
    <h2>-------{{message}}-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <h2>-------HelloVuex元件資料-------</h2>
    <hello-vuex></hello-vuex>
  </div>
  </template>
  
  <script>
    import HelloVuex from './components/HelloVuex.vue'

    export default {
      name: 'App',
      components:{
        HelloVuex
      },
      data() {
        return {
          message: 'app元件資料',
          // counter:0
        }
      },
      methods: {
        addition(){
          this.$store.commit('increment')
        },
        subtraction(){
          this.$store.commit('decrement')
        }
      },

    }
  </script>

<style>
</style>

通過devtools去除錯：

關於getters的用法：

import Vue from 'vue'
import Vuex from 'vuex'

//1.安裝外掛，底層會去執行vue.install方法
Vue.use(Vuex)

//2.建立物件
const store = new Vuex.Store({
    state: {
        counter: 1000,
        Student:[
            {id:1,name:'hc',age:24},
            {id:2,name:'hc1',age:30},
            {id:3,name:'hc2',age:20},
            {id:4,name:'hc3',age:18},
        ]
    },
    //修改state裡面的東西
    mutations: {
        increment(state) {
            state.counter++
        },
        decrement(state) {
            state.counter--
        }
    },
    actions: {

    },
    //state中的資料可能會發生變異（改變），利用getters去依賴並獲取它改變後的資料，這裡的getters和計算屬性有些類似，同樣也可以快取state單一狀態樹中的資料，只有再依賴值發生改變時才去重新計算
    //getters：去store拿一些資料的時候，如果state中的資料需要經過變化才給別人用的，就可以再getters中去處理
    getters: {
        PowerCounter(state){
            return state.counter * state.counter
        },
        //filter過濾一些資料，獲取年齡大於20歲的學生
        More20Stu(state){
            return state.Student.filter(s=>s.age>=20)
        },
        //獲取年齡大於20歲學生的個數
        More20StuLength(state,getters){
            return getters.More20Stu.length
        },
        MoreAgeStu(state){
            return age=> state.Student.filter(s=>s.age>age)
        }

    },
    modules: {

    }

})

//3.匯出Store物件
export default store

再app.vue中使用getters：

<template>
  <div id="app">
    <h2>-------{{message}}-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>

    <h2>-------App元件的Getter資料</h2>
    <h2>{{$store.getters.PowerCounter}}</h2>
    <h2>{{$store.getters.More20Stu}}</h2>
    <h2>{{$store.getters.More20StuLength}}</h2>
    <h2>{{$store.getters.MoreAgeStu(8)}}</h2>

    <h2>-------HelloVuex元件資料-------</h2>
    <hello-vuex></hello-vuex>
  </div>
  </template>
  
  <script>
    import HelloVuex from './components/HelloVuex.vue'

    export default {
      name: 'App',
      components:{
        HelloVuex
      },
      data() {
        return {
          message: 'app元件資料',
          // counter:0
        }
      },
      methods: {
        addition(){
          this.$store.commit('increment')
        },
        subtraction(){
          this.$store.commit('decrement')
        }
      },

    }
  </script>

<style>
</style>

關於Mutation：

mutation攜帶引數（統稱為：payload）的方式：

通過commit去提交一下，變更state中的資料

Mutation提交風格：

在用的時候就這麼用：

Mutation型別常量是什麼？

在編碼過程中，有時候為了程式碼準確度更高，通常在變數一樣的情況下選擇拷貝的方式進行替換，vuex實際上也幫我們考慮了這一點。

我們可以通過定義常量統一管理這些名稱一樣的變數，到時候用的時候直接用常量即可。這裡你也可以直接去看官方文件更加容易理解。

關於Actions：

如果通過Actions去更新State裡面的值，實際上還是需要走mutation那一步，也就是說要更新state就要走mutation不能直接通過Action更新State，這樣devtools是檢測不到到底是怎麼更新的，這也和上面那個迴圈圖不符合！！！

那麼如何去更新呢？

context引數是要帶，這裡的意思是上下文的意思。

可以把context看作是store，那麼context也是可以用通過commit去更新的，再呼叫mutation的updateInfo定義的方法

要通過dispatch去更新

使用promise：這裡的promise在dispatch後做了一次週轉。

還有最後一個vuex五大屬性的最後一個modules

在vuex的state中，我們知道這裡是儲存一些元件需要共享的一些變數，而我們現在是崇尚單一狀態樹，也就是隻有一個Store物件管理vuex。那麼如果變數變得很多，就會顯得state裡面變得比較臃腫。

所以他讓我們在Store裡面具體分模組

這裡說明雖然state資料被模組化了，但是vue依然把它放到state中了。

需要注意的是，在使用模組裡面的getters時，是可以有三個引數的，根據第三個引數可以拿到外面Store物件裡的state的值！！！

模組裡面的actions裡面的context引數指向的是自己模組的mutations！！！而不是最外面的Store的mutaions