fix: 页内菜单带参互相跳转,标签没有选中高亮

This commit is contained in:
xiaoxian521 2022-11-16 17:30:24 +08:00
parent 617f8e936c
commit facb09d779
4 changed files with 39 additions and 9 deletions

View File

@ -137,6 +137,7 @@ const tabsRouter = {
roles: ["admin", "common"]
}
},
// query 传参模式
{
path: "/tabs/query-detail",
name: "TabQueryDetail",
@ -146,11 +147,13 @@ const tabsRouter = {
roles: ["admin", "common"]
}
},
// params 传参模式
{
path: "/tabs/params-detail/:id",
component: "params-detail",
name: "TabParamsDetail",
meta: {
// 不在menu菜单中显示
showLink: false,
roles: ["admin", "common"]
}

View File

@ -9,11 +9,11 @@ import {
getCurrentInstance
} from "vue";
import { tagsViewsType } from "../types";
import { isEqual } from "@pureadmin/utils";
import type { StorageConfigs } from "/#/index";
import { useEventListener } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router";
import { transformI18n, $t } from "@/plugins/i18n";
import { isEqual, isBoolean } from "@pureadmin/utils";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
@ -106,15 +106,14 @@ export function useTags() {
]);
function conditionHandle(item, previous, next) {
if (
Object.keys(route.query).length === 0 &&
Object.keys(route.params).length === 0
) {
return route.path === item.path ? previous : next;
} else if (Object.keys(route.query).length > 0) {
return isEqual(route.query, item.query) ? previous : next;
if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
if (Object.keys(route.query).length > 0) {
return isEqual(route.query, item.query) ? previous : next;
} else {
return isEqual(route.params, item.params) ? previous : next;
}
} else {
return isEqual(route.params, item.params) ? previous : next;
return route.path === item.path ? previous : next;
}
}

View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
defineOptions({
name: "Menu1-2-2"
@ -8,6 +9,7 @@ defineOptions({
const input = ref("");
const { t } = useI18n();
const { query } = useRoute();
</script>
<template>
@ -16,5 +18,9 @@ const { t } = useI18n();
<p style="text-indent: 2em">{{ t("menus.hsmenu1-2") }}</p>
<p style="text-indent: 4em">{{ t("menus.hsmenu1-2-2") }}</p>
<el-input v-model="input" />
<div class="mt-4" v-if="query.text">
此页面携带的参数值为{{ query.text }}
</div>
</div>
</template>

View File

@ -117,6 +117,28 @@ function onCloseTags() {
>
跳转页内菜单传path对象
</el-button>
<el-divider />
<el-button
@click="
$router.push({
name: 'Menu1-2-2',
query: { text: '传name对象优先推荐' }
})
"
>
携参跳转页内菜单传name对象优先推荐
</el-button>
<el-button
@click="
$router.push({
path: '/nested/menu1/menu1-2/menu1-2-2',
query: { text: '传path对象' }
})
"
>
携参跳转页内菜单传path对象
</el-button>
<el-link
class="ml-4"
href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE"