什么是 <router-view :key="$route.fullPath"> ？

Posted 2023-02-22

【中文标题】什么是 <router-view :key="$route.fullPath"> ？

【英文标题】：What is <router-view :key="$route.fullPath"> ?

【发布时间】：2019-03-21 17:25:01

【问题描述】：

我对 Vue.js 完全陌生，我想我对路由器如何处理以下内容有所了解：

<router-link to="/">

但我并不真正理解以下行的作用：

<router-view :key="$route.fullPath"></router-view>

我相信 router-view 本身可以确保显示内容，但关键部分是什么意思？

【问题讨论】：

非常感谢您提出这个问题！ :D 我一直在寻找这个功能好几个小时！！！

【参考方案1】：

见Special Attributes - key

它还可以用于强制替换元素/组件，而不是重复使用它。当您想要：

正确触发组件的生命周期挂钩 触发转换

$route.fullPath 定义为

完整解析的 URL，包括查询和哈希。

如果您将key 绑定到$route.fullPath，则每次发生导航事件时，它总是“强制替换” <router-view> 元素/组件。

如上所述，这很可能是为了触发过渡/动画。

【讨论】：

这不是更新视图中的信息。我必须完全重新加载页面，这对我来说是不可能的。

@James 您可能还缺少其他东西。您应该发布一个新问题

有什么方法可以使用 $router.push() 以编程方式获取它？

@Ashbay 得到 "what"?