路由懒加载：
左边是无懒加载，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：
