前言
好久没来写了，还是有不少值得记录的内容要写。这段时间，头儿终于不让我干杂活了，什么加个按钮啊，找个bug呀之类的，现在终于让我自己写组件了，我就姑且看作是对我的些许认可吧。
最近在做
最近在写的是一个组件，嵌套在其他页面中，通过左侧导航栏点击，右侧显示区域随动切换。在这个组件之中也有这样一个类似的结构，也就是双层嵌套。本身来讲其实并不难，之前跟着网课也写过相仿的功能。但是现在完全自己对着设计稿实现，还是有不少问题出现的。组件内部还要求使用“瀑布流”，说实话我之前都没听说过这个词...
（如图，我要完成的是框住的部分，红框本身是一个组件，镶嵌在最外层组件中，而黄框是镶嵌在红框中的另一个组件）
实现流程
我是从外到内写的，想把大概样子搓出来，什么按钮、输入框之类的；然后配置路由，实现跳转；最后精细修改样式，让页面变得像设计稿。（注意我用了“像”🤫，而不是一模一样）
组件分区
首先把组件分成上方banner部分、下方内容部分；之后细化下半部分，又分为左侧滚动栏和右侧瀑布流展示区。主要就是用到了flex布局配合部分元素固定宽度（面试题中常见的两栏、三栏布局），这部分还算简单。
配置路由
这里就开始出问题了，因为使用了vue，所以理所应当地用了vue-router。然而事情并没有想象的顺利，之前在视频课中学到的路由写法在这里不适用了，依照从前的知识，我完全不知道某个组件应该出现在哪个router-view中😇。然后我请教AI，学会了另一种更规范直观的用法：
export default [
{
path: '/assetlib',
name: 'assetlib',
component: indexLayout,
redirect: '/assetlib/list',
children: [
{
path: 'list',
name: 'assetlibList',
component: () => import('@/views/assetlib/list.vue'),
redirect: '/assetlib/list/resource',
children: [
{
path: 'resource',
name:'assetlibResource',
component:() => import('@/views/assetlib/components/resource.vue'),
},
......
]
}
]
}
]
好吧，也不是那么直观，反正就是component属性对应一个父组件，也就是它里面肯定有个router-view，然后下面的children属性中的组件都是准备镶嵌到父组件中的子组件。
瀑布流
这个本来想试试自己写一下的，但还是被现实打败了😅，直接用的masonry.js，事实一次又一次的证明，如果有轮子，就™不要自己写。瀑布流这里每个图片上还有按钮，点击有弹窗，要求背景模糊等等...相对简单，不细说了。
OSS 对象存储
头儿刚跟我说这个的时候，直接给了我一大堆什么AccessKeyID、regionID、STSToken，我连听都没听过...看了看官方文档也没什么进展。后续给自己电脑下了一个OSS Browser，然后npm install ali-oss，乱七八糟一顿操作，成功给自己整乱了🙂，看来得自己私下补补课了。
那就写这些吧，仅用于日常记录。
