<template>
|
<PageWrapper title="带参数菜单（路由）" content="支持多级参数">
|
当前参数：{{ params }}
|
<br />
|
输入参数切换路由：
|
<Input v-model:value="value" placeholder="建议为url标准字符，输入后点击切换" />
|
<a-button type="primary" @click="handleClickGo">切换路由</a-button>
|
<br />
|
切换路由后
|
<ul>
|
<li>可刷新页面测试路由参数情况是否正常。</li>
|
<li>可于左侧菜单中展开子菜单，点击测试参数是否携带正常。</li>
|
</ul>
|
</PageWrapper>
|
</template>
|
<script lang="ts">
|
import { Input } from 'ant-design-vue';
|
import { computed, defineComponent, ref, unref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { PageWrapper } from '/@/components/Page';
|
|
export default defineComponent({
|
name: 'TestMenu',
|
components: { PageWrapper, Input },
|
setup() {
|
const { currentRoute, replace } = useRouter();
|
const value = ref<string>('');
|
|
const handleClickGo = () => {
|
const { name } = unref(currentRoute);
|
replace({ name: name!, params: { id: unref(value) } });
|
};
|
return {
|
value,
|
handleClickGo,
|
params: computed(() => {
|
return unref(currentRoute).params;
|
}),
|
};
|
},
|
});
|
</script>
|
