我是Vue的新手.js和我认为我对路由的工作原理有点了解,比如:

<router-link to="/">

但我并不真正理解下面这句话的作用:

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

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

推荐答案

Special Attributes - key

它还可以用来强制替换元素/组件,而不是重用它.当您想要:

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

$route.fullPath的定义是

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

如果将key绑定到$route.fullPath,则每次发生导航事件时,<router-view>元素/组件中的"force a replacement"个都会被绑定.

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

Vue.js相关问答推荐

如何根据数据库中的条件在vue中创建类

VueUse onClickOutside不支持右键单击

如何在与父集合相同的读取中取回子集合(或重构数据?)

Vuetify右侧并排switch

vue router/:param 斜杠的参数

禁用 vue-cli webpack 编码图像 base64

CssSyntaxError 使用 Webpack 4 构建未知单词

Vuetify grid layout - 如何填充网格中元素的高度

如何在map中添加新的标记 onclick?

Vuetify 置顶工具栏

在组件上的 Vue 3 中获取 URL 查询参数

Vuetify v-select 组件宽度变化

为什么 Vue.js 使用 VDOM?

Import Unexpected identifier + SyntaxError: Unexpected string

我应该将所有数据存储在 vuex 状态

使用 Vue 在单个文件组件中调用渲染方法

脚本npm run dev和npm run watch是做什么用的?

仅在提交时验证 vuetify 文本字段

Vue过滤器应该如何使用typescript绑定?

如何订阅store 模块