vue3常用代码
文章目录
- 监听路由
- vue3 警告Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
- mitt、project/inject 无效
- 解决方案
菜鸟做项目时发现很多 vue3 常用的代码，所以来总结一下！
监听路由
import { useRoute } from "vue-router";
let router = useRoute();
let actroute = ref(null);
watch(() => router.path,(newValue, oldValue) => {console.log("watch", newValue, oldValue);actroute.value = newValue;},{ immediate: true }
);
vue3 警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined.
vue.config.js 添加上该代码：
chainWebpack: (config) => {config.plugin("define").tap((definitions) => {Object.assign(definitions[0], {__VUE_OPTIONS_API__: "true",__VUE_PROD_DEVTOOLS__: "false",__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",});return definitions;});},
参考：Vue3.4+报Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined… 处理
mitt、project/inject 无效
如果通信的组件是 router-view 里面 根据路由加载的或者有两层嵌套，那么不管是 mitt 还是 project/inject 都无法进行组件间的通信，因为 mitt 要能通信必须是该界面已经加载出来了！而 project/inject 不知道为什么，嵌套了两层后，第二层 router-view 里面的组件就无法获取了，会报错
[Vue warn]: injection "openmenu" not found. at <Resources onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <ElMain> at <ElContainer> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <App>
好像是因为第一层 router-view 被卸载了，所以 project 为 undefined 了！
解决方案
使用pinia！