uni-app 路由报错问题：先进入一个测试路由，然后返回上一级页面，再进入引用该页面组件的页面时路由报错

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 路由报错问题：先进入一个测试路由，然后返回上一级页面，再进入引用该页面组件的页面时路由报错

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

  • 先进入一个测试路由，然后在返回上一级页面，然后在进入到引用这个页面组件的页面

预期结果：

  • 程序能正常运行

实际结果：

  • 代码报错

bug描述：

18:18:37.141 [Vue warn]: Unhandled error during execution of setup function
at <PsychologicalTestReportkey=0id="379"onOnImageSaveSuccess=fn<onReportImageSaveSuccess> ...>
at <IndexpageId=14pagePath="pages_subPkg_profile_psychological_test/psychological-test-end-questionnaire-form/index"pageQuery={"reportId":"379"} ...>
18:18:37.141 TypeError: Cannot read property 'route' of undefined
18:18:37.141 [Vue warn]: Component is missing template or render function.
at <PsychologicalTestReportkey=0id="379"onOnImageSaveSuccess=fn<onReportImageSaveSuccess> ...>
at <IndexpageId=14pagePath="pages_subPkg_profile_psychological_test/psychological-test-end-questionnaire-form/index"pageQuery={"reportId":"379"} ...>

Harmonyos Next教程
3 回复

如果确认是框架问题提供最小化复现示例（上传附件），让我们及时定位问题，及时修复 【bug优先处理规则】https://ask.dcloud.net.cn/article/38139


请在app中运行

针对你提到的uni-app路由报错问题，这里提供一个可能的解决方案，并附上相关代码案例。这个问题通常涉及到页面栈的管理和路由的重复加载。以下是一个简化的代码示例，用于展示如何安全地管理页面跳转和返回，以避免路由报错。

1. 页面结构假设

假设你有三个页面：PageA、TestPage 和 PageB。

  • PageA 有一个按钮跳转到 TestPage。
  • TestPage 有一个返回按钮返回到 PageA。
  • PageB 包含一个组件，该组件实际上引用了 TestPage 的内容（这里为了简化，我们假设通过条件渲染展示相同内容，而不是直接引用组件）。

2. 代码实现

PageA.vue

<template>
  <view>
    <button @click="navigateToTestPage">Go to Test Page</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToTestPage() {
      uni.navigateTo({
        url: '/pages/TestPage/TestPage'
      });
    }
  }
}
</script>

TestPage.vue

<template>
  <view>
    <button @click="goBack">Back to PageA</button>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

PageB.vue

<template>
  <view>
    <button @click="showTestContent">Show Test Content</button>
    <view v-if="showContent">
      <!-- 这里假设TestContent组件与TestPage内容相同，为简化处理直接展示内容 -->
      <text>This is the test content from TestPage</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    };
  },
  methods: {
    showTestContent() {
      this.showContent = !this.showContent;
      // 注意：这里不执行路由跳转，而是通过条件渲染展示内容
    }
  }
}
</script>

3. 注意事项

  • 在 PageB 中，我们通过条件渲染来模拟引用 TestPage 的内容，而不是直接通过组件引用或路由跳转，这可以避免路由报错。
  • 如果确实需要在 PageB 中复用 TestPage 的逻辑或组件，考虑将共享逻辑抽象成Vue组件，并在需要的地方引入。
  • 确保在 uni-app 的 pages.json 配置文件中正确声明了所有页面的路径。

通过上述方法，你可以有效地管理页面跳转和返回，同时避免路由报错。如果问题依旧存在，建议检查具体的错误信息，以便进一步定位问题。

回到顶部