文章目录 一、封装侧边栏组件 1、在 components 文件夹下创建 AsideView.vue 2、将HomeView.vue中的侧边栏的内容 复制到AsideView.vue中 3、AsideView.vue 组件中定义外部传入的参数类型 4、HomeView.vue中导入并注册定义好的侧边栏组件 5、在原来侧边栏的位置使用侧边栏组件并传入参数 二、封装Header组件 1、在components文件夹下创建HeaderView.vue 2、将HomeView.vue中Header部分内容复制到HeaderView.vue中 3、HeaderView.vue组件中定义外部传入参数 4、HomeView.vue中导入并注册定义好的HeaderView组件 5、在原来header位置使用封装好的header组件并传入参数 6、解决样式失效问题 三、封装用户管理组件 1、在views目录下创建UserView.vue 2、将HomeView.vue 中el-main里面的内容都复制到UserView.vue中 3、将HomeView.vue中script标签中的内容也复制过来,将没用的删除掉 4、Home View.vue中el-main里面的内容用 一下标签替代 四、配置路由 1、配置子路由 2、配置主页 3、配置用户管理路由 五、添加面包屑 1、从element-ui文档中找到如下代码 复制 2、调整页签样式 3、封装面包屑组件 4、在header中导入并使用面包屑组件 5、当处于用户管理这一页的时候,点击面包屑的用户管理 报如下错误 一、封装侧边栏组件 1、在 components 文件夹下创建 AsideView.vue 2、将HomeView.vue中的侧边栏的内容 复制到AsideView.vue中 3、AsideView.vue 组件中定义外部传入的参数类型 4、HomeView.vue中导入并注册定义好的侧边栏组件 5、在原来侧边栏的位置使用侧边栏组件并传入参数 二、封装Header组件