在Vue3中，如何访问Composition API中类似于“beforeRouteEnter”的属性？

2ledvvac 于 2023-05-01 发布在 Vue.js

关注(0)|答案(2)|浏览(241)

我正在使用一个Vue项目（Composition API，Single-File Components），我想访问我来自的Vue页面的数据。我真的希望访问Options API中beforeRouteEnter（about）中包含的所有数据，例如以前的组件名称。但是，Composition API中的导航卫士没有任何与beforeRouteEnter卫士等效的功能。
我尝试在主<setup script>段上方添加一个单独的<setup>段，但我不知道如何从原始设置中访问单独设置中的值：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    beforeRouteEnter(to, from) {
        ...
    },
});
</script>

<script lang="ts" setup>
// How to access to/from in here?
</script>

我的问题是：
1.如何将顶部设置段中的值访问到常规<setup>中？
1.**这是一个公认的Vue模式吗？**如果没有，是否有其他方法来获得更多的信息，而不是 * 只是 * 路径本身（例如。例如，以前的组件的名称）使用合成API？

vue.js

来源：https://stackoverflow.com/questions/76127570/in-vue3-how-can-i-access-properties-similar-to-those-in-beforerouteenter-in-t

2条答案

按热度按时间

c7rzv4ha1#

beforeRouteEnter在setup()中不可用。但它是一个特殊的钩子，在setup()之前运行（与大多数其他钩子不同），因此您可以使用外部存储将数据从它传递到setup()：

routerStore。ts

import { reactive } from 'vue'
export const state = reactive({
  from: null,
  to: null
})

查看：

<script lang="ts">
import { state } from './routeStore'
export default defineComponent({
  beforeRouteEnter(from, to) {
    Object.assign(state, { from, to })
  }
})
</script>
<script lang="ts" setup>
import { state } from './routeStore'
console.log(state)
</script>

赞(0）回复(0）举报 2023-05-01

vdgimpew2#

script setup不能这样做，它是setup函数体的糖语法，在路由组件示例化时调用，而beforeRouteEnter钩子应该在组件示例化之前触发。
script setup仅涵盖最常见的情况，任何其他情况都应与script耦合或替换：

<script>
export default {
  beforeRouteEnter() { ... }
}
</script>

<script setup>...</script>

只要使用beforeRouteEnter进行异步路由初始化，就可以替换为异步设置，Vue路由器支持：

<script setup>
await ...
...
</script>

赞(0）回复(0）举报 2023-05-01

我来回答

在Vue3中，如何访问Composition API中类似于“beforeRouteEnter”的属性？

2条答案

相关问题

热门标签

最新问答