Vue路由器重新加载当前路由
在不重新加载整个页面的情况下，我需要在vue应用程序中再次重新加载当前路由(仅重新加载组件)。
我在vue路由器中有一个路径，如下所示，
{
path: "/dashboard",
name: "dashboard",
component: loadView("Dashboard"),
},当用户单击仪表板导航项目时，用户将被重定向至具有vue路由器编程导航的仪表板页面
this.$router.push({ name: "dashboard" });但是，当用户已经在仪表板路由中，并且用户再次单击仪表板导航项目时，什么也不会发生。我认为这是vue路由器的默认行为。但我需要强制重新加载Dashboard组件(而不是刷新整个页面)。
我无法使用beforeRouteUpdate，因为路由器没有更新。此外，我在beforeEach这样的后卫之前也尝试过全球赛。但它也不起作用。
如何在不重新加载整个页面的情况下强制重新加载仪表板组件？
回答 2
Stack Overflow用户
发布于 2019-04-05 13:00:03
这可以通过两种方式来完成。
1)尝试按照建议的here执行vm.$forceUpdate()；。
2)您可以采取将key分配给子组件的策略，但每当您想要重新渲染组件时，您只需更新key。
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>每次调用forceRerender时，属性componentKey都会发生变化。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。
您得到的是一个子组件，它将重新初始化自身并“重置”其状态。
Stack Overflow用户
发布于 2021-10-29 12:01:53
这里没有提到，但由于所提供的解决方案需要大量额外的工作才能使应用程序正确呈现，这是一个脆弱的解决方案。我们刚刚实现了另一个运行良好的解决方案。
尽管这是一个完全的黑客行为。
if (this.$route.name === redirect.name) {
// this is a filthy hack - the vue router will not reload the current page and then have vue update the view.
// This hack routes to a generic page, then after this has happened the real redirect can happen
// It happens on most devices too fast to be noticed by the human eye, and in addition does not do a window
// redirect which breaks the mobile apps.
await this.$router.push({
name: RouteNames.ROUTE_REDIRECT_PLACEHOLDER
});
}
... now continue to do your normal redirect.基本上，重定向到占位符，等待响应，然后立即继续到您实际想要移动到的另一个页面
https://stackoverflow.com/questions/55527883
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号