#### # 引言

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

#### # 路由配置

    1
    2
    3
    4
    5

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

#### # 菜单配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

    <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 })
          }
        }
    }

#### # 页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25

    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查询数据
    	...
    }

Vue