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