weixin_57677300的博客

第一种：基于角色Role的动态路由管理。登录：登录验证通过之后后台会返回一个token给前端，前端会保存在vuex和本地(防止刷新丢失登录状态)，然后拿token去后台请求一个userInfo的接口获取用户信息（用户名，权限信息等等）权限验证：通过token获取用户role信息，然后根据用户role算出对应应有权限信息的路由，最后用router.addRotes动态挂载计算出的路由。

作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观的

$children与$parent

listeners与$attrs(组件通信方式的一种)他们两者都是组件实例的属性,可以获取到父组件给子组件传递的props与自定义事件。

属性修饰符sync父子组件数据同步的一种，和v-model差不多可以实现父子组件数据同步:money.sync,代表父组件给子组件传递props['money'],给当前子组件绑定一个自定义事件(update:money)

这样就实现了v-model实现父子组件数据同步 (实现父子组件通信)组件上可以理解为v-model是 :value="msg" @input="msg = $event" 的语法糖

原生btn按钮-- 使用Event1组件：底下这个组件 @click.native 原生DOM事件，利用事件的委派-->-- 自定义事件对于原生DOM没有任何意义 -->-- 原生的btn

即使这样也还是无法实现轮播图，原因是，我们轮播图的html中有v-for的循环，我们是通过v-for遍历bannerList中的图片数据，然后展示。注意：在创建swiper对象时，我们会传递一个参数用于获取展示轮播图的DOM元素，官网直接通过class（而且这个class不能修改，是swiper的css文件自带的）获取。但是这样有缺点：当页面中有多个轮播图时，因为它们使用了相同的class修饰的DOM，就会出现所有的swiper使用同样的数据，这肯定不是我们希望看到的。文章有写的不当的地方，欢迎指正修改。

mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发，mockjs可以拦截ajax请求，返回设定好的数据。注意：在server.js文件当中对于banner.json||floor.json的数据没有暴露，但是可以在server模块中使用。mock需要的数据|相关mock代码页书写完毕，关于mock当中serve.js需要执行一次，注意：mock（模拟数据）数据需要使用到mockjs模块，可以帮助我们模拟数据。**第六步:**回到入口文件，引入mockServe.js。

||undefined}})时，如果多次执行相同的push，控制台会出现警告。注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。文章有写的不当的地方，欢迎指正修改。由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象。原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。这种异常，对于程序没有任何影响的。

​ 业务：路由跳转，home模块跳转search模块，home的数据带上给search上使用。home.vue${this${thissearch.vue 获取传递过来的参数

启动npm run dev时报错。failed to load config from C:\Users\PC3803\Desktop\Vue3+TS\vue3_ts_cms\vite.config.tserror when starting dev server:Error: The package "@esbuild/win32-x64" could not be found, and is needed by esbuild."--no-optional" or "--omit=option

今天写项目的准备收尾的时候，想给路由组件切换给一个过渡效果。在开发的过程中遇到一些坑。

pinia官方文档Pinia 的优点更多查看文档…在main.js中引入pinia并创建容器挂载到根实例上创建stores文件夹和index.js文件（这个文件以后基本不用管了）在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）defineStore 是需要传参数的，然后再组件中使用：运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一：一个不解构，一个不解构看看区别。运行结

路由跳转及参数的使用在vue3.x setup中 ， useRouter、useRoute通常用来：vue-router 3.x中 获取路由参数：通配符 * 被取消keep-alive使用可利用keep-alive的 include 或 exclude 属性（include 和 exclude 包含的name 是组件的name不是router name）来设置缓存：vue2写法：vue3写法：注意：keep-alive 必须用在 router-view 内部文章有写的不当的地方，欢迎指正修

使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。父组件：子组件：运行结果：script setup 是 vue3.2 的新语法糖，并不是新增的功能模块，主要好处有：因为没有了setup函数，那么props，emit怎么获取呢？setup script语法糖提供了新的API来供我们使用。父组件：子组件：运行结果：直接打印父组件传过来的值。defineEmits 子组件向父组件事件传递子组件：父组件：运行后

axios 发 post 请求，后端接收不到参数

Vue中v-show和v-if有什么区别？使用场景分别是什么？

Vue自定义指令directive（详细）

Vue中的双向数据绑定v-model的实现原理

Vue中computed和watch的区别

Vue中的数据代理