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

2ledvvac  于 2023-05-01  发布在  Vue.js
关注(0)|答案(2)|浏览(240)

我正在使用一个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?

c7rzv4ha

c7rzv4ha1#

beforeRouteEntersetup()中不可用。但它是一个特殊的钩子,在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>
vdgimpew

vdgimpew2#

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

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

<script setup>...</script>

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

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

相关问题