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

Question

我是Vue.js的新手,我想我对路由器如何处理以下内容有一些了解:

<router-link to="/">

但我真的不明白以下几行是做什么的:

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

我相信路由器视图本身可以确保显示内容,但关键部分是什么意思？

Answer 1

请参阅特殊属性 - 键

它还可用于强制更换元件/组件,而不是重复使用.当您想要:

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

$route.fullPath 被定义为

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

如果绑定key到$route.fullPath,它总是"强制替代"的的<router-view>元素/组件每一个导航事件发生的时间.

如上所述,这很可能是为了触发转换/动画.

Answer 2

在 Vue-Router 4.0 中，这是使用作用域插槽来实现的。根据文档，以下内容是强制重新加载路线所必需的。

<router-view v-slot="{ Component, route }">
  <component :is="Component" :key="route.path" />
</router-view>

这对于与 Vue 3 转换集成是必要的。

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

注意：直接放在:key="route.path"上<router-view>可能会导致微妙的路由问题。例如一条重定向触发两次的路由。