67 lines
2.3 KiB
Vue
67 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<PageWrapper title="组件传参实例">
|
|||
|
|
<p class="mb-3">
|
|||
|
|
<strong>1、菜单组件参数：</strong>
|
|||
|
|
</p>
|
|||
|
|
<p class="mb-3"> 如设置组件参数：{ aa: 'aa1', bb: 'bb2' } </p>
|
|||
|
|
<p class="mb-3"> 当前接受参数是：{{ props }} </p>
|
|||
|
|
<p class="mb-3">
|
|||
|
|
<strong>2、路由请求参数：</strong>
|
|||
|
|
</p>
|
|||
|
|
<p class="mb-3">
|
|||
|
|
路由请求参数：
|
|||
|
|
<Input
|
|||
|
|
v-model:value="value"
|
|||
|
|
placeholder="建议为url标准字符，输入后点击切换"
|
|||
|
|
style="width: 150px; margin-right: 10px"
|
|||
|
|
/>
|
|||
|
|
<a-button type="primary" @click="handleClickGo">切换路由</a-button>
|
|||
|
|
(输入参数后，点击切换路由按钮)
|
|||
|
|
</p>
|
|||
|
|
<p class="mb-3"> 接受请求参数是：{{ query }} </p>
|
|||
|
|
<p class="mb-3">
|
|||
|
|
接受路径参数是：{{ params }} <br />
|
|||
|
|
注意：在 Vue Router 4.1.4 中 push params 被移除，请使用 query 代替 <br />
|
|||
|
|
原文：https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
|
|||
|
|
<br />
|
|||
|
|
那么如何使用 params 组件参数呢？一般这样的地址会作为隐形路由使用（隐藏的菜单或权限菜单）<br />
|
|||
|
|
菜单管理：链接地址：/demo/params/{test1}，组件路径：/demo/params，是否可见：隐藏 <br />
|
|||
|
|
尝试地址栏填写：http://127.0.0.1:3100/demo/params/test123 <br />
|
|||
|
|
这样 unref(currentRoute).params.test1 将得到 test123 的值
|
|||
|
|
</p>
|
|||
|
|
</PageWrapper>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { Input } from 'ant-design-vue';
|
|||
|
|
import { computed, ref, unref } from 'vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
import { PageWrapper } from '@jeesite/core/components/Page';
|
|||
|
|
import { propTypes } from '@jeesite/core/utils/propTypes';
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
id: propTypes.string,
|
|||
|
|
aa: propTypes.string,
|
|||
|
|
bb: propTypes.string,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const { currentRoute, push } = useRouter();
|
|||
|
|
const value = ref<string>('');
|
|||
|
|
|
|||
|
|
const params = computed(() => {
|
|||
|
|
return unref(currentRoute).params;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const query = computed(() => {
|
|||
|
|
return unref(currentRoute).query;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleClickGo = () => {
|
|||
|
|
const { name } = unref(currentRoute);
|
|||
|
|
push({
|
|||
|
|
name: name!,
|
|||
|
|
params: { param: unref(value) },
|
|||
|
|
query: { query: unref(value) },
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|