一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

前言

最近在做项目的时候遇到了一个问题，就是在共同的组件上添加一个保存按钮，但是这个保存按钮只在路由跳转到新建和编辑的时候，才显示这个按钮，当时我想到的方法是在共同的组件上添加一个具名插槽，在引入时 使用插槽添加这个按钮，但是发现使用插槽没有办法取到页面上的值，因为页面的整体布局是 如下图：

我要获取在el-header 获取到router-view 的内存东西，这是很困难的（在获取值是最好不要使用$root、$parent），这个问题请教了我师傅，感觉我师傅就是YYDS，告诉我自己额外写一个el-header的内容，使用路由来判断 如果是新建或者编辑的页面则使用自己新写的el-header的内容，并且和下面的内容放在同一个组件中，这样去取到页面中form表单的值就简单多了。

创建判断路由的js文件

//rule.js
// 不使用layout el-header的 默认路径,
export const path = [
  'dataQuality/addRule',
  'dataQuality/editRule'
]

// index.js
const headerRouterExcludePath = [];

const registerExcludedPath = itemConfig => {
  for (const [key, value] of Object.entries(itemConfig)) {
    headerRouterExcludePath.push(value)
  }
}
// 创建一个路由数组，判断rule.js 文件中的路由和当前页面跳转的路由是否相等
const setupExcludedPath = () => {
  const modules = import.meta.globEager('./*.js')
  for (const [file, { path }] of Object.entries(modules)) {
    if (!file.includes('index')) {
      registerExcludedPath(path)
    }
  }
}
setupExcludedPath();

export default headerRouterExcludePath;

在你的layout文件中引入刚刚写的路由的配置；

import headerRouteExcludedPath from './config/layout/index';
export default {
    computed:{
     // 使用计算属性来解决el-header 的组件是否能显示
    isShowLayoutHeaderInfo() {
      let showFlag = true;
      for (let routerItem of this.headerRouteExcludedPath) {
        if (this.$route.path.includes(routerItem)) {
          showFlag = false;
        }
      }
      return showFlag;
    },
    }
}

// 返回一个布尔值，有在template上绑定，用来控制他是否显示。
// <el-header v-if="isShowLayoutHeaderInfo"></el-header>

在页面上引入自己写的文件

<template>
  <div class="rule-list-add-rule">
    <el-row class="add-rule-header">
    <!--这里是自己写的页面，这个组件内容替代el-header的内容-->
      <rule-layout-header
        :routes="menuRoutes"
        :ruleInfo="baseInfo"
      ></rule-layout-header>
    </el-row>
    <el-row class="add-rule-base-info">
      <rule-management-add-rule-base-info
      ></rule-management-add-rule-base-info>
    </el-row>  
  </div>
</template>

这样在点击保存按钮时，使用常用的vue父子传值就可以获取到form表单中的内容了。

最后

我正在成长，如果有什么问题欢迎大家留言，我们一起讨论。。。

如果对您有用，希望您留下评论/👍/收藏。

您的三连，是对我创作的最大的鼓励🙇‍♀️🙇‍♀️🙇‍♀️