1:路由传递参数（对象写法）path是否可以结合params参数一起使用?
不可以：不能这样书写，程序会崩掉,因为路由跳转参数的时候，对象的写法可以是name、path形式，但是需要注意的
this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase}})

2:如何指定params参数可传可不传? 
路由默认要求传params参数，如果不传，url会有问题，我的路由组件的name会消失不见
在路由组件中 /search/:keyword?，加上问号可以解决可传可不传，保证url是准确携带组件name的

3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
使用undefined解决: params参数可以传递、不传递(空的字符串)
this.$router.push({name:'search',params:{keyword:'' || undefined},query:{k:this.keyword.toUpperCase}})

4:如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
5: 路由组件能不能传递props数据?
可以,而且有三种写法
            // 路由组件能不能传递props数据？
            // 布尔值的写法: 只能传params
            // props: true
            // 对象的写法
            // props:{a:1,b:2}
            // 函数写法: 可以params参数、query参数、通过props传递给路由组件
            // props:($route)=>{
            //     return {keyword:$route.params.keyword,k:$route.query.k}
            // }
            // props:($route)=> ({keyword:$route.params.keyword,k:$route.query.k})

DataPermissionRules.vue

<template>
  <div>
    <el-drawer
      title="数据权限规则"
      :visible.sync="table"
      direction="rtl"
      size="50%"
      v-if="table"
    >
      <el-divider></el-divider>
      <el-form ref="ruleForm" :inline="true" :model="form">
        <el-row>
          <div class="table-tools">
            <el-col
              v-for="(item, index) in queryConfig"
              :key="index"
              :xs="12"
              :sm="12"
              :md="12"
              :lg="12"
              :xl="8"
            >
              <el-form-item :label="item.label" :prop="item.field">
                <el-input
                  v-model="form[item.field]"
                  clearable
                  :placeholder="'请输入' + item.label"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="onSubmit()"
                >
                  查询
                </el-button>
                <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  @click="resetForm('ruleForm')"
                >
                  重置
                </el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleClick(0, {})">
                  添加
                </el-button>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <div class="table-main">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          :height="height"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :row-style="{ height: '10px' }"
          :cell-style="{ padding: '5px 0' }"
          default-expand-all
          border
        >
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
          ></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleClick(1, scope.row)"
              >
                查看
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick(2, scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleClick(5, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.pageNo"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </el-drawer>
    <table-edit ref="form" @fetch-data="getList" />
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import {
    queryConfig,
    tableHeader,
  } from '@/views/sys/permission/component/config'
  import { fetchPermissionDataRuleList } from '@/api/systemPermission'
  import TableEdit from './TableEdit'
  import {addMenu, editMenu, removeMenu} from '@/api/systemMemu'
  import {getList} from "@/api/ad";
  export default {
    name: 'DataPermissionRules',
    components: { Pagination, TableEdit },
    data() {
      return {
        listQuery: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        tableHeader: tableHeader,
        table: false,
        dialog: false,
        loading: false,
        tableData: [],
        tableLoading: false,
        queryConfig,
        form: {
          ruleName:'',
          ruleValue:''
        },
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight(0)
      },
    },
    created() {
      // this.initForm()
      console.log(this.form)
      this.getList({})
    },
    mounted() {},
    methods: {

      /**
       * 获取页面所有按钮操作
       * @param type 0-新增 1-查看 2-编辑 3-添加下级 4-数据规则 5-删除
       * @param val
       */
      handleClick(type, row) {
        row.type = type
        switch (type) {
          case 0:
            this.$refs['form'].showDialog(row)
          case 1:
            this.$refs['form'].showDialog(row)
            break
          case 2:
            this.$refs['form'].showDialog(row)
            break
          case 5:
            this.handleDelete(row)
            break
        }
      },
      // queryDateList(val){
      //   console.log(val)
      //   val.rule = 'like'
      //   val.type = 'String'
      //   val.val = val.field
      //   let queryParams = []
      //   queryParams.push(val)
      //   console.log(queryParams)
      //   this.getList(queryParams)
      // },
      onSubmit() {
        this.getList(this.dealQuery(queryConfig))
      },
      dealQuery(query) {
        console.log(query)
        let array = []
        let queryArray = JSON.parse(JSON.stringify(query))
        console.log(queryArray)
        queryArray.forEach((item) => {
          item.val = this.form[item.field]
          delete item.component
          delete item.options
          array.push(item)
        })
        console.log(array)
        return array

      },
      getList(queryParams) {
        this.tableLoading = true
        const params = {
          ...this.listQuery,
          queryParams,
        }
        fetchPermissionDataRuleList(params)
          .then((res) => {
            console.log(res)
            const {
              data: { total, records },
            } = res
            this.total = total
            this.tableData = records
          })
          .finally(() => {
            this.tableLoading = false
          })
      },
      // initForm() {
      //   let form = {}
      //   queryConfig.forEach((item) => {
      //     form[item.field] = ''
      //   })
      //   this.form = form
      // },
      showEdit() {
        this.title = ''
        this.table = true
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      // 删除
      handleDelete(row) {
        this.$confirm('您确定删除该数据吗？', '提示', {
          confirmButtonText: '是的',
          cancelButtonText: '再考虑考虑',
          type: 'warning',
        })
          .then(async () => {
            try {
              await removeMenu(row.id)
              this.getList()
            } catch (error) {}
          })
          .catch(() => {})
      },

    },
  }
</script>

<style scoped></style>

config.js

const tableHeader = [
  {
    prop: 'id',
    label: 'id',
    width: '',
    align: 'center',
    showOverflowTooltip: false,
  },
  {
    prop: 'ruleName',
    label: '规则名称',
    width: '',
    align: 'center',
    showOverflowTooltip: false,
  },
  {
    prop: 'ruleColumn',
    label: '规则字段',
    width: '',
    align: 'center',
    showOverflowTooltip: false,
  },
  {
    prop: 'ruleValue',
    label: '规则值',
    width: '',
    align: 'center',
    showOverflowTooltip: false,
  },
]
const queryConfig = [
  {
    field: 'ruleName',
    label: '规则名称',
    type: 'String',
    rule: 'like',
    val: '',
    component: 'input',
    showOverflowTooltip: false,
  },
  {
    field: 'ruleValue',
    label: '规则值',
    type: 'String',
    rule: 'like',
    val: '',
    component: 'input',
  },
]

const editConfig = [
  {
    label: '规则名称',
    require: true,
    prop: 'ruleName',
    value: '',
    pageType: 1,
    options: {},
  },
  {
    label: '规则字段',
    require: false,
    prop: 'ruleColumn',
    value: '',
    pageType: 1,
    options: {},
  },
  {
    label: '条件规则',
    require: true,
    prop: 'ruleConditions',
    value: '',
    pageType: 1,
    options: {},
  },
  {
    label: '规则值',
    require: true,
    prop: 'ruleValue',
    value: '',
    pageType: 1,
    options: {},
  },
]
export { queryConfig, editConfig, tableHeader }

  <li class="with-x" v-if="searchParams.trademark">{{ searchParams.trademark.split(":")[1] }}<i @click="removeKeyword">x</i></li>