最近自己搭了一个vue3的项目 所以有一些之前都没有用过的方法 记录一下。

1、菜单图标的引入（和vue2引入的方法不太一样 之前一直是用的require v3无法这样使用）

const getAssetURL = (path:any) => {return new URL(`./assets/images/home/${path}.png`, import.meta.url).href;
}
</sc

2、页面布局是上下左右这样的布局 左边菜单的高度是整个铺满 右边的高度需要根据屏幕的大小来铺满 目前我想到的方法是计算左边section的高度 然后再减去部分高度（如果有更好的方法可以留言告诉我。）

onMounted(()=>{// 组件挂载后获取初始高度updateBoxHeight();// 监听浏览器窗口大小变化window.addEventListener('resize', updateBoxHeight);
})onUnmounted(() => {// 组件卸载前移除事件监听window.removeEventListener('resize', updateBoxHeight);
});const updateBoxHeight = () => {const rect = rightSection.value.offsetHeight;console.log(rect,'rect');webHeight.value = rect-70
}watch([route.path,webHeight],(newValue,oldValue) => {console.log(newValue,'newValue');getBreadcrumb();updateBoxHeight();
})

vue3 watch监听的方法和vue2也不一样 如果是监听多个事件 那么用数组定义就可以了 再把需要监听的事件放在里面即可。

const getBreadcrumb = () => {breadList.value = [];name.value = route.nameroute.matched.forEach(element => {if(element.children.length>0){breadList.value = element.children}});breadList.value = breadList.value.filter((e:any) => {return e.path != 'transaction'})
}

上面是监听的一个面包屑的事件

<a-breadcrumb><a-breadcrumb-item v-for="(item,index) in breadList" :key="item.name"><router-link :to="{path:item.path === ''?'/':item.path}">{{item.name}}</router-link></a-breadcrumb-item></a-breadcrumb>