vue3

路由懒加载：

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

 

 案例：做一个tabbar：

全部代码：台式电脑D://aaa2222339/VueJs/Day 07/上课代码/LearnVuejs07

注意：

1.定义四个TabBarItem组件，每个组件可以装2个东西，用2个slot占住

2.定义一个TabBar组件，它是小组件的容器，可放多个TabBarItem组件，用1个slot占住

3.之前一直在app.vue里面使用组件，把容器和小组件们拼接起来，但是发现Bar的东西越写越多，此时把TabBar那些代码单独抽离出来，再新建一个MainTabBar组件，把Bar的内容放到里面去，最后把MainTabBar注册到App.vue里面

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设置样式。

9.如果想从外面把变量传到TabBarItem小组件中，则小组件用props定义一个path变量用于接收，在使用组件的界面MainTabBar里面的TabBarItem标签里面写入：path="aaa"，这样aaa就传给小组件了。如果只给一个TabBarItem标签里面写入path=‘aaa’，则只有这一个组件接收值了，这里要给所有都写上。组件定义就好比类，在外面使用组件时，就像一个个实例。给TabBarItem定义一个点击事件，那么当外面点击一个组件时，这个小组件就会都触发事件，其他组件没事，事件定义到div上。

10.<router-view>为某个组件预留位置，当index.js找到组价后，就把东西显示到router-view那里

11.页面一加载时，MainTabBar把path的赋值给了小组件TabBarItem，小组件内的计算属性也自动工作。抓住一点：每次都只有一个激活路由，利用this.$route.path==this.path，可以一个组件是true，其他组件是false的现象。

12.

13.

 

App.vue引用css：

14

这里的TabBarItem是由slot来占坑的，而真正要写入的具体的东西写到App.vue里面的TabBarItem的标签之间，这些具体内容的位置就是由slot定义好的：

 

 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：

 

原文：https://www.cnblogs.com/pjishu/p/12566218.html