快捷导航栏代码中组件的key赋值两次为什么组件只实例化一次呢？ · Issue #I8AT4E · lyt-Top/vue-next-admin - Gitee.com

开源项目 > WEB应用开发 > 后台管理框架 &&

/ 详情

待办的

创建于

2023-10-25 15:39

// 页面加载前，处理缓存，页面刷新时路由缓存处理
部分代码是模板：
模板部分代码

这部分是接收到事件后重新渲染子组件的逻辑：
修改key逻辑部分代码

这里给refreshRouterViewKey 赋值了两次按道理说key更改后组件不是应该重新渲染吗这里先赋值为空字符串后又在nextTick的回调里重新赋值为什么实际上组件只渲染一次呢？？？

创建了任务

修改了描述

原值

// 页面加载前，处理缓存，页面刷新时路由缓存处理

部分代码是模板：

<template>

	<div class="layout-parent">

		<router-view v-slot="{ Component }">

			<transition :name="setTransitionName" mode="out-in">

				<keep-alive :include="getKeepAliveNames">

					<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />

				</keep-alive>

			</transition>

		</router-view>

		<transition :name="setTransitionName" mode="out-in">

			<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />

		</transition>

	</div>

</template>

这部分是接收到事件后重新渲染子组件的逻辑：

onBeforeMount(() => {

	state.keepAliveNameList = keepAliveNames.value;

	mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {

		state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);

		state.refreshRouterViewKey = '';

		state.iframeRefreshKey = '';

		nextTick(() => {

			state.refreshRouterViewKey = fullPath;

			state.iframeRefreshKey = fullPath;

			state.keepAliveNameList = keepAliveNames.value;

		});

	});

});

这里给refreshRouterViewKey 赋值了两次 按道理说key更改后组件不是应该重新渲染吗 这里先赋值为空字符串 后又在nextTick的回调里重新赋值 为什么实际上组件只渲染一次呢？？？

新值

// 页面加载前，处理缓存，页面刷新时路由缓存处理

部分代码是模板：

![模板部分代码](https://foruda.gitee.com/images/1698219673606306133/2f6ed01b_9636450.png "屏幕截图")

这部分是接收到事件后重新渲染子组件的逻辑：

![修改key逻辑部分代码](https://foruda.gitee.com/images/1698219701018063036/d2e1ded1_9636450.png "屏幕截图")

这里给refreshRouterViewKey 赋值了两次 按道理说key更改后组件不是应该重新渲染吗 这里先赋值为空字符串 后又在nextTick的回调里重新赋值 为什么实际上组件只渲染一次呢？？？

展开全部操作日志

登录后才可以发表评论

状态

负责人

里程碑

Pull Requests

关联的 Pull Requests 被合并后可能会关闭此 issue

分支

开始日期 - 截止日期

-

置顶选项

优先级

参与者（1）

TypeScript

1

https://gitee.com/lyt-top/vue-next-admin.git

git@gitee.com:lyt-top/vue-next-admin.git

lyt-top

vue-next-admin

vue-next-admin