# Vue 根据路由传参修改页面数据 - Vue - 工作 | ☆∵∴Hito∴∵★ = 涛声依旧 = 天下事有难易乎？为之，则难者亦易矣
Keywords: 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查询数据

    	...

    }

Vue