首页 工作 解决问题 Vue

# 引言

在开发前端页面时会存在相同的页面展示，只是菜单名称不同、数据类型不同的情况。如果再拷贝一个页面来展示后期就需要维护两个页面，同时也增加了工作量。但是只使用一个页面通过传参来改变数据就方便多了。

# 路由配置

{
    path: '/test/:type/:menuIndex',
    name: 'Test',
    component: _import('xxx/Test.vue')
 }

# 菜单配置

<template>
    <el-menu
      class="aside-menu"
      :default-active="menuIndex.toString()"
      @select="handleSelect"
    >
      <el-menu-item
        index="1"
        class="aside-menu-item"
      >
        <template #title>
          <span>TEST1</span>
          <el-icon :size="20"><TrendCharts /></el-icon>
        </template>
      </el-menu-item>
      <el-menu-item
        index="2"
        class="aside-menu-item"
      >
        <template #title>
          <span>TEST2</span>
          <el-icon :size="20"><Orange /></el-icon>
        </template>
      </el-menu-item>
    </el-menu>
</template>
methods: {
    handleSelect (val) {
      if (val === '1') {
        this.$router.push({ path: '/test/type1/' + val })
      } else if (val === '2') {
        this.$router.push({ path: '/test/type2/' + val })
      }
    }
}
# 页面
created () {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        if (isNotEmpty(toParams.menuIndex)) {
          this.menuIndex = toParams.menuIndex
        }
        if (isNotEmpty(toParams.type)) {
          this.type = toParams.type
        }
        // 根据type查询数据
        ...
      }
    )
    if (isNotEmpty(this.$route.params.menuIndex)) {
      this.menuIndex = this.$route.params.menuIndex
    }
    if (isNotEmpty(this.$route.params.type)) {
      this.type = this.$route.params.type
    }
},
mounted () {
	// 根据type查询数据
	...
}