菜鸟做项目时发现很多 vue3 常用的代码,所以来总结一下!
监听路由
import { useRoute } from "vue-router";
let router = useRoute();
watch(
() => router.path,
(newValue, oldValue) => {
console.log("watch", newValue, oldValue);
},
{ immediate: true }
);
这里顺便补充一下 路由跳转 、 跨界面跳转、获取参数
路由跳转
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
// 跳转路由
const toPath = function (path) {
if (route.path !== path.path) {
//判断当前路径与跳转路径是否相同
router.push(path);
}
};
跨界面跳转
import { useRouter } from "vue-router";
// 新标签页跳转
const router = useRouter();
const openPage = (params = "") => {
let href = null;
if (params) {
href = router.resolve({
path: "/newform",
query: {
id: JSON.stringify(params),
},
});
} else {
href = router.resolve({
path: "/newform",
query: {
id: null,
},
});
}
window.open(`${href.href}`, "_blank");
};
这里也可以使用 name:“newform” ,要和自己router里面定义的保持 对应关系!
动态路由也是一样:
普通路由两个同时写也没有问题,但是动态路由不行,会报错!!!
报错:runtime-core.esm-bundler.js:343 Uncaught Error: Missing required param “xxx”
获取参数
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.id); // 这里有两种一种 params、一种 query,注意取的时候要对应!
且要分清 动态路由(params) 和 路由后面带参数(query) 这两种情况!具体看文章:23 动态路由(路由传参)
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 了!也可能是因为 provide 只能够向下进行传递数据,而路由并不相当于是其子组件!
解决方案
使用pinia、vuex等!
防抖函数 (已封装)
/**
* 防抖函数
* @param {function} fn
* @param {number} delay
* @returns {function}
* 如果函数有参数,直接定义一个常量等于debounce(fn,delay)
* 调用的时候直接 常量(函数参数) 就行
*
*/
export const debounce = (fn, delay) => {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
};
下载函数 (已封装)
详见:常用代码:vue必须配置的部分代码、element ui按需引入、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper、下载函数