uni-app 页面作为组件嵌入时 props解析route失败

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

uni-app 页面作为组件嵌入时 props解析route失败

操作步骤：

A页面接收id属性，B页面嵌套A页面。

  1. 打开A页面 -》 正常显示，
  2. 打开B页面 -》 A组件没有获取到id属性

预期结果：

A组件获取到id属性

实际结果：

A组件没有获取到id属性

bug描述：

10:48:46.091 [Vue warn]: Unhandled error during execution of setup function  
 at <Detailid=1>  
 at <List__pageId=7__pagePath="pages/list/list"__pageQuery={} ...>  
10:48:46.091 TypeError: Cannot read property 'route' of undefined

开发环境及版本信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows 11 正式 4.45 Android Android 11 华为 metapad 11 vue vue3 云端

Harmonyos Next教程
1 回复

在uni-app中，当页面作为组件嵌入到其他页面时，可能会遇到props解析route失败的问题。这通常是因为组件化页面在嵌入时，其路由参数传递和解析方式与常规页面有所不同。为了确保route参数能够正确传递给子组件，我们需要进行一些额外的处理。

以下是一个简单的示例，展示如何在uni-app中实现页面作为组件嵌入，并正确解析route参数。

父页面（ParentPage.vue）

<template>
  <view>
    <navigator url="/pages/ChildPage/ChildPage?id=123&name=uniapp">跳转到子组件页面</navigator>
    <view>
      <!-- 嵌入子组件 -->
      <child-page :route="route"></child-page>
    </view>
  </view>
</template>

<script>
import ChildPage from '@/pages/ChildPage/ChildPage.vue';

export default {
  components: {
    ChildPage
  },
  data() {
    return {
      route: this.$route // 获取当前路由信息
    };
  },
  onLoad() {
    // 在页面加载时，可以获取到路由参数并传递给子组件
    console.log(this.$route.params, this.$route.query);
  }
};
</script>

子组件页面（ChildPage.vue）

<template>
  <view>
    <text>ID: {{ routeQuery.id }}</text>
    <text>Name: {{ routeQuery.name }}</text>
  </view>
</template>

<script>
export default {
  props: {
    route: {
      type: Object,
      required: true
    }
  },
  computed: {
    routeQuery() {
      // 从props中的route对象解析出query参数
      return this.route.query || {};
    }
  },
  onLoad() {
    // 在组件加载时，可以访问到通过props传递的route对象
    console.log(this.route);
  }
};
</script>

注意事项

  1. 路由参数传递：在父页面中，我们通过navigator组件跳转到子组件页面，并在URL中携带参数。同时，我们将当前路由信息this.$route作为props传递给子组件。

  2. 参数解析：在子组件中，我们通过props接收路由信息，并使用computed属性来解析query参数，以便在模板中直接使用。

  3. 路由守卫：如果需要对路由参数进行验证或处理，可以在父页面或子组件的onLoad生命周期钩子中进行。

通过上述方式，我们可以在uni-app中实现页面作为组件嵌入，并正确解析route参数。

回到顶部