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

Question

我是 Vue.js 的新手，我想我对路由器的工作原理有一些了解，例如：

<router-link to="/">

但我不太明白下面这行的作用：

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

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

Answer 1

见Special Attributes - key

It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:

Properly trigger lifecycle hooks of a component

Trigger transitions

$route.fullPath 定义为

The full resolved URL including query and hash.

如果你将key绑定到$route.fullPath，它每次都会"force a replacement" <router-view>元素/组件发生导航事件。

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

Answer 2

在 Vue-Router 4.0 中，这是使用作用域插槽实现的。根据 the docs，以下是强制重新加载路由所必需的。

<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>上会导致微妙的路由问题。例如重定向触发两次的路由。

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

What is <router-view :key="$route.fullPath">?

html

javascript

vue.js

vue-router