vue3常用代码

菜鸟做项目时发现很多 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！