javascript - 如何对 Vue 3“脚本设置”组合 API 上的路由更改做出反应?
问题描述
这是我在我的应用程序中的路由示例:
{
path: "/something",
name: "SomeRoute",
component: SomeComponent,
meta: {showExtra: true},
},
{
path: "/somethingElse",
name: "SomeOtherRoute",
component: SomeOtherComponent,
},
然后我有以下组件,您会注意到它有两个script
标签,一个带有组合 API,一个没有:
<template>
<div>
This will always be visible. Also here's a number: {{ number }}
</div>
<div v-if="showExtra">
This will be hidden in some routes.
</div>
</template>
<script setup lang="ts">
import type { RouteLocationNormalized } from "vue-router"
import { ref } from "vue"
const number = 5
const showExtra = ref(true)
const onRouteChange = (to: RouteLocationNormalized) => {
showExtra.value = !!to.meta?.showExtra
}
</script>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
watch: {
$route: {
handler: "onRouteChange",
flush: "pre",
immediate: true,
deep: true,
},
},
})
</script>
这可以正常工作:当我使用它输入路线时,meta: {showExtra: false}
它会隐藏额外的 div,否则会显示它。
然而,我想要做的是仅使用组合 API 来实现相同的效果,换句话说,<script>
完全删除第二个标签。我试过这个:
<script setup lang="ts">
import type { RouteLocationNormalized } from "vue-router"
import { ref } from "vue"
import { onBeforeRouteUpdate } from "vue-router"
// ...
// same as before
// ...
onBeforeRouteUpdate(onRouteChange)
</script>
但是当我切换路由时,这不会按预期生效。我知道watch
我可以导入的功能,但我不确定如何获取有关路线的元信息以及如何安抚类型检查器。
解决方案
watch
您可以通过从 vue导入方法将您的观察者转换为组合 API
<script lang="ts">
import { defineComponent, vue } from "vue"
import { useRoute } from "vuex"
export default defineComponent({
setup() {
const route = useRoute()
watch(route, (to) => {
showExtra.value = !!to.meta?.showExtra
}, {flush: 'pre', immediate: true, deep: true})
},
})
</script>
推荐阅读
- javascript - for..of 循环定义中 let 和 const 的用法
- avro - 如何在 NiFi 中正确解析嵌套的 Avro 记录?
- docker - dockerized 应用程序需要通过 localhost 与其他 docker 交互
- ruby-on-rails - 如何在 RubyMine 中运行“gem install bundler”?
- jquery - 在 django 应用程序的 python 代码中如何响应 AJAX 请求?
- spring-boot - 未创建 GraphQLSchema bean - Spring Boot
- c# - 动态 EF Core Include 等效于 ThenInclude
- javascript - 如何检测对象数组是否包含特定对象?
- google-maps - 确定 Google Maps API 密钥的使用
- c# - ASP.NET 未显示任何错误,但无法将数据插入数据库