# 引言
在开发前端页面时会存在相同的页面展示，只是菜单名称不同、数据类型不同的情况。如果再拷贝一个页面来展示后期就需要维护两个页面，同时也增加了工作量。但是只使用一个页面通过传参来改变数据就方便多了。
# 路由配置
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查询数据
...
}
|
