路由懶加載：
左邊是無懶加載，vue-router最終打包成3個js文件（而之前只有一個bundle.js），右邊是有懶加載的，此時一個組件對應一個js，效率更高。
重構項目：
嵌套路由：
隨便創建2個小組件來放到首頁：
配置index.js：
注意childre里面的path就沒有了：
放到Home.vue里面，並指明位置：
再npm run dev
展示：
改善：加個默認路由：
傳遞參數：
上面的動態路由是一種方式，下面是另外一種 方式：
創建另外一個profile.vue：
在index.js里面：
App.vue：
利用query傳遞參數，這種傳參方式不用夾在路徑后面，是單獨的
注意to前要寫冒號：
在profile.vue里面取出傳遞過來的參數來：
改善：如果不想用router-link：
導航守衛：
每點擊一個路由連接，想把網頁對應的title也改掉。
第一 種方法：在對應組件里面編寫created函數，當組件創建時會自動執行created，那么對應的文檔title就改了：
第二種方法：
先在index.js里面給相應的路由加上一個meta屬性，
再監聽路由跳轉，跳轉之前執行beforeEach，把目標的title屬性賦值給document.title,match[0]表示取到匹配外面的大組件，match[1]匹配到大組件里面的小組件，防止路由嵌套出現undefined，next()必須寫：
上面是全局守衛，
路由獨享的守衛：只有進了這個'about'路徑，路由守衛才工作：調用beforeEnter：
記錄狀態：
假定一開始打開頁面時，顯示的是新聞，然后利用路由嵌套點擊消息，接着再點擊關於，此時再點擊首頁，這時希望顯示的是上一次的狀態：顯示消息
解決：
當離開Home組件時，beforeRouteLeave就把當前的最全的嵌套路由保存到this.path中，跳轉到首頁時，activated就把跳轉到上次保存的帶有嵌套的path賦值給this.path：
還要加上keep-alive,它可以保持組件是活的，而且activated和deactivated在keep-alive的情況下才生效:
如果不想讓Profile和User2個組件用keep-alive：
核心思想：
一個slot可以裝下多個東西
如果組件內東西固定，則組件里面有什么就直接在組件里面定義完，外面直接用；
如果組件內，位置固定但是里面的東西不確定，則定義的時候位置用slot占住，具體東西是什么則使用的時候再傳。
如果組件內，什么都不確定，則定義的時候用一個slot就好了
當一個組件里面的組件代碼太多，可以新建一個組件，然后抽出一部分代碼放到新組件的定義中，然后外面直接用這個新組件
案例：做一個tabbar：
全部代碼：台式電腦D://aaa2222339/VueJs/Day 07/上課代碼/LearnVuejs07
注意：
1.定義四個TabBarItem組件，每個組件可以裝2個東西，用2個slot占住
2.定義一個TabBar組件，它是小組件的容器，可放多個TabBarItem組件，用1個slot占住
3.之前一直在app.vue里面使用組件，把容器和小組件們拼接起來，但是發現app里面的組件很多，此時把TabBar那些代碼單獨抽離出來，再新建一個MainTabBar組件，把Bar的內容放到定義中去，最后在App.vue里面使用MainTabBar
4.src/assets/css/base.css：保存的是公共的css文件
5.陰影設置：box-shadow：10px（陰影向右移10px） 10px（向下移動10px） 10px（模糊程度） rgb(100,100,100,.1)（最后這個參數是透明度）
6.圖片都放在assets/img下
7.設置組件樣式時，在該組件的style標簽處寫入css代碼。
8.點擊小組價的圖片時會變成另外一張圖片，所有小組件共需要3個slot，其中2個slot用v-if決定選擇顯示哪個
注意v-if和class的設置 不要直接給slot設置，而是給誰設置樣式，就在誰的外面加上一個div，給這個div設置樣式。
11.頁面一加載時，MainTabBar把path的賦值給了小組件TabBarItem，小組件內的計算屬性也自動工作。
抓住一點：每次都只有一個激活路由，利用this.$route.path==this.path，可以一個組件是true，其他組件是false的現象。
13.
App.vue引用css：
15.
創建項目時，如果router選擇了no，則后面自己安裝：
16.
再新建文件夾views，把不同的組件放到views里面的一個個文件夾內，而components文件夾放公共的組件：
17.
給路徑src起個別名t，這樣在別的文件中就可以直接t/aa/bb，即在src/aa/bb下找文件了，如果對於img的需要再加~,cl2里面不能用@作為別名：
promise.all：
2個異步事件，第一個表示2s后把‘result1’參數傳到then，第二個表示1s后把'result2'傳到then
只要當這兩個異步執行完之后，才會調用then函數，此時results集合了上面傳過來的所有參數，是一個數組。
Vuex可以管理各個組件公用的變量，滿足響應式：
安裝：
在src創建store文件夾，再在里面新建index.js：
在main.js里面注冊上：
vuex管理個變量：
直接在組件中用這個公共變量：
谷歌添加一個devtools插件，可以用於vuex和調試：
查看是否添加上了:
如果要想改變vuex保存的變量，則通過在mutation里面定義方法：
在組件里調用：
可以通過devtools查看：
如果每次想拿到counter的平方，則可以添加getter，然后在組件里使用它：
假定定義一個公共數組students：
想把年齡>20的對象篩選出並展示給組件，則定義到getter里面：
在組件里拿到它：
在getters中的方法也能調用另一個方法：
如果不想把age寫死，想通過view傳遞過來再判斷，注意此處返回一個函數，且這個moreAgeStu寫在了getters里面:
說明：也能利用箭頭函數實現
App.vue：
假定要通過在vue里面點擊按鈕把加多少這個參數傳遞過去，可以通過commit的第二個參數。方法寫打mutations里面：
假定要傳個學生對象過去：
vue:
index.js的mutations：
另一種傳參風格：
vuex監聽一開始就給對象定義的屬性，如果后來通過：對象['age']=123再臨時添加屬性是不會被監聽到的，無法實現響應式，需要：
如果想刪掉對象的age屬性，用Vue.delete：
在store文件夾下建立mutations-types.js，定義別名，這樣如果要換個函數名字直接改下這個js文件，其他的組件都用別名就好了：
在外面的vue里面使用別名：
先導入：
結論：
對於參數，除了actions的參數是context，其他都是state，mutations可以往函數后面寫第二個參數用來接收
注意mutation里面只能寫同步操作，否則devtools跟蹤不到，異步操作要寫道actoins里面，然后再提交給mutation：
mutation：
vue里面修改methods：
如果還有參數傳入：
當vue利用dispatch把傳遞過去后還想在接受index.js傳遞過來的參數並處理，則在后面用then來接受參數並處理：
同時index.js里面的對應函數里面返回promise對象，執行箭頭函數體，最后加上resolve把參數傳給vue：
再細分模塊，把state，mutations等放到模塊里，在store里面注冊模塊a：
vue里面引用模塊里面的變量：
再試試模塊里面的mutation ：
試下模塊里的getter：
在getter里面的方法fullname2把getter作為參數傳入:
如果要用index.js里面且模塊外面的數據，則模塊的getters里面加第三個參數rootState，見fullname3：
再試下action，它里面的commit是提交給了所在模塊的mutation里面的方法了：
asyncUpdateName:
簡化index.js的目錄結構：
store下新建文件和文件夾modules：
抽離：
mutations:
action：
getter:
在modules文件夾新建moduleA.js：
