BeforeRouteEnter 无法通过脚本设置在生产环境中工作

Posted 2023-03-16

【中文标题】BeforeRouteEnter 无法通过脚本设置在生产环境中工作

【英文标题】：BeforeRouteEnter not working in production with script setup

【发布时间】：2022-01-13 12:14:48

【问题描述】：

我在 vue-router 中使用了 beforeRouteEnter 钩子，使用 axios 从两个不同的端点加载数据。我使用promise.all() 加载数据，然后使用next() 将其传递给组件。它似乎正在开发中，但是当它托管在 vercel 上时，数据不会呈现在组件上。

import axios from "axios"
import NProgress from "nprogress"

export default 
  name: "DetailView",


beforeRouteEnter(to, from, next) 
    NProgress.start()

    const getDetails = axios.get(`api/grades/$ to.params.id /`)
    const getResults =
      axios.get(`api/results/`, 
        params: 
          'grade-id': to.params.id,
        
      )


    Promise.all([getDetails, getResults])
      .then(([details, results]) => 
        next((vm) => 
          vm.details = details.data
          vm.results = results.data
        )
      )
      .finally(NProgress.done())
  ,

我使用了<script setup>...</script> 来设置功能

import  ref  from "vue"

const details = ref()
const grades = ref()

我对 javascript 也比较陌生，并且仍然试图很好地理解 Promise 和 async/await。谢谢

【问题讨论】：

看看这个答案是否有帮助***.com/questions/66481911/…

这种方法在我不使用脚本设置时有效

【参考方案1】：

终于找到了解决问题的办法。 vue 中使用<script setup> 的组件默认关闭，通过模板refs 或$parent 链检索的组件的公共实例不会暴露<script setup> 中声明的任何绑定。来自 vue 文档。

我必须使用 defineExpose 编译器宏显式公开 beforeRouteEnter 导航守卫中使用的属性

defineExpose(
    
       details,
       results
    
)