关于uniapp搭建小程序真机调试时路由报错query未定义的解决方法

最新推荐文章于 2025-06-24 23:15:32 发布

原创最新推荐文章于 2025-06-24 23:15:32 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序

在最开始时是使用的钩子拿到页面跳转时传过来的id，但并不适合微信小程序，则会报错query未定义，在路由中将query定义为默认也无法解决，但将它换乘onLoad的时候则错误解决。

mounted() {
           // 获取路由参数中的Id
           const id = this.$route.query.ID;
           this.getDetail(id)
       },

onLoad(e) {
           const id = e.ID;
           this.getDetail(id);
       },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老鸭汤真好喝

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决uni-app小程序获取路由及路由参数

King Saj

01-09

2530

【代码】解决uni-app小程序获取路由及路由参数。

uniapp(微信小程序) - 解决报错TypeError: Cannot read property ‘get‘ of undefined（Uniapp编译运行到微信小程序 开发者工具出现错误提示）

高级前端工程师

04-25

1万+

uniapp，微信小程序，Uniapp微信小程序报错TypeError: Cannot read property ‘get‘ of undefined，uniApp编译微信小程序平台报错，如何解决小程序端报错，微信开发者工具报错，uniapp报错提示Cannot read property ‘get‘ of undefined，uniapp就微信小程序端提示错误，uni-app打包微信小程序，UNIAPP构建微信小程序报错，开发者工具控制台出错，uniapp运行到小程序平台报错，找不到定义，导入模块以及定

1 条评论您还未登录，请先登录后发表或查看评论

解决uni-app里面的小程序获得当前路由

胡图图不糊涂的博客

10-06

3334

项目场景：在uni-app里面编写小程序 问题描述：在uni-app的H5端可以拿到当前页面栈的FullPath，但是App端（小程序）就是undefined了： this.$route.fullPath 小程序错误如下：解决方案：用如下的方式即可： let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面 let page = pages[pages.length

【uniapp】获取url中的参数this.$route.query或this.$mp.query

最新发布

高级前端工程师

06-24

2564

uniapp开发小程序，编译时报错Cannot read property ‘forceUpdate‘ of undefined的解决方案，uniapp，微信小程序，Cannot read property ‘forceUpdate‘ of undefined，uniapp 报错，uniapp编译小程序报错，如何解决这个问题，uni-app开发的项目在微信小程序里调试时，报错：Cannot read property ‘forceUpdate‘ of undefined，添加微信小程序的AppID还是不行，

uniapp [抖音小程序] - 解决报错 Page[pages/x] not found. May be caused by :1. Forgot to add page route in app.

🏆 前端领域优质创作者

09-03

2445

uni-app，抖音小程序，字节跳动小程序，uniapp字节小程序，抖音小程序真机警告，报错，警告，路由顺序，app.json，router路由报错，notfound.Maybecausedby:1.Forgottoaddpagerouteinapp.json.2.InvokingPage()inasynctask.，把hbuilderx升级到最新版还是不行，依旧不行，抖音小程序开发者工具提示警告如何解决，偶尔出现，时好时坏，页面刷新就报，苹果ios，安卓Android

uniapp [微信小程序] - 解决报错 Page[pages/x] not found. May be caused by :1. Forgot to add page route in app.

🏆 前端领域优质创作者

09-03

3120

uni-app，微信小程序，uniapp微信小程序，微信小程序真机警告，报错，警告，路由顺序，app.json，router路由报错，notfound.Maybecausedby:1.Forgottoaddpagerouteinapp.json.2.InvokingPage()inasynctask.，把hbuilderx升级到最新版还是不行，依旧不行，微信小程序开发者工具提示警告如何解决，偶尔出现，时好时坏，页面刷新就报，苹果ios，安卓Android，真机调试，真机

【解决】uniapp踩坑记录，真机调试 instanceof 无法判断数组类型、路由报错query未定义...

SummerGao

08-05

426

【代码】uniapp踩坑记录，真机调试 instanceof 无法判断数组类型。

uniapp 动态修改导航栏之前使用this.$mp.page page提示未定义

土豆发芽了

12-09

4265

uniapp 动态修改导航栏 // 使用条件编译防止H5报错 // #ifdef APP-PLUS let pages = getCurrentPages(); let page = pages[pages.length - 1]; let currentWebview = page.$getAppWebview(); // 动态修改导航栏按钮上红点 currentWebview.setTitleNViewButtonStyle(e.index,{ redDot:false }

在uniapp中vue3报错Cannot read property ‘__route__‘ of undefined

weixin_56709740的博客

03-06

2668

因为vue3没有this上下文，所以使用uni.createSelectorQuery().in(this)时会出这个错误。

关于微信小程序没定义query却还报错TypeError: Cannot set property ‘query‘ of undefined

graciedu的博客

11-15

3081

关于微信小程序没定义query却还报错TypeError: Cannot set property ‘query‘ of undefined

this.$route.query一直取不到

weixin_39897287的博客

11-25

1万+

在APP.vue里面 mounted里面（最前面） console.log(this.$route.query.source)第一次代码运行完成后能打印值，后面刷新页面一直打印不了，也存了缓存但是打印不出来，后来找到原因是 route.js并没有执行完毕console就打印出来了，所以 this.$router.onReady(() => { i...

uniApp uni-simple-router 路由传参问题

m0_57547956的博客

10-14

2275

从列表跳转到详情将参数带入 -> let ids = { storeId: this.Data.storeId, goodsId: this.Data.goodsId, id: this.Data.id } //路由跳转 this.$Router.push({ path: '/pagesA/pages/orderDetails/orderDetails?item', query: { ids } .

uniapp组件里的onLoad和onShow里的方法不执行

m0_68683769的博客

03-28

3430

uniapp生命周期函数不生效、uniapp中onShow的应用、this.$router.push onShow、uniapp页面生命周期、uniapp路由守卫、uniapp中onShow只执行一次

uniapp微信小程序真机调试时MiniProgramError Cannot read properties of undefined (reading 'trim')是什么错误

06-11

### 解决 UniApp 微信小程序真机调试时出现的 MiniProgramError 错误在 UniApp 微信小程序开发中，真机调试时可能会遇到 `MiniProgramError` 错误，例如 `Cannot read properties of undefined (reading 'trim')`。此类错误通常表明代码中尝试访问一个未定义或为 `null` 的对象属性。以下是详细分析和解决方案。 #### 问题原因该错误可能由以下几种情况引起： 1. 数据未正确初始化或异步数据加载延迟导致变量为 `undefined`。 2. 在模板渲染时直接访问对象的嵌套属性，而未判断上层对象是否存在[^1]。 3. CSS 文件中存在语法错误或资源未正确加载，导致样式文件解析失败。 #### 解决方案 ##### 1. 检查数据初始化确保所有可能被访问的对象都已正确初始化。如果数据依赖异步请求，请使用条件渲染以避免访问未定义的属性。 ```vue <template> <view v-if="data && data.property"> {{ data.property.trim() }} </view> </template> <script> export default { data() { return { data: null // 确保初始值为 null 或其他安全值 }; }, onLoad() { this.fetchData(); }, methods: { fetchData() { setTimeout(() => { this.data = { property: "example" }; // 模拟异步数据加载 }, 1000); } } }; </script> ``` ##### 2. 避免直接访问嵌套属性在 Vue 模板中，如果需要访问嵌套属性，请先检查父级对象是否已定义。 ```vue <template> <view v-if="user && user.info && user.info.name"> {{ user.info.name.trim() }} </view> </template> <script> export default { data() { return { user: null }; } }; </script> ``` ##### 3. 检查 CSS 文件确保项目中的 CSS 文件没有语法错误。错误提示提到 `css/chunk-0b797dff.c3b0582d.css` 文件存在问题，需仔细检查该文件的内容。例如，避免类似以下错误： ```css /* 错误示例：选择器未正确闭合 */ .example { color: red; ``` 正确的写法应为： ```css .example { color: red; } ``` ##### 4. 清理缓存并重新编译有时，编译缓存可能导致问题。可以尝试以下操作： - 删除 `dist` 和 `node_modules` 文件夹。 - 运行 `npm install` 重新安装依赖。 - 使用 `uni-app` 提供的清理命令（如支持）。 ```bash rm -rf dist node_modules npm install npm run build:mp-weixin ``` ##### 5. 检查插件和依赖如果项目中使用了第三方插件或库，请确保其版本与当前项目兼容。不兼容的插件可能导致运行时错误。 --- ### 示例代码以下是一个完整的示例，展示如何避免访问未定义属性的错误。 ```vue <template> <view> <text v-if="message && message.content">{{ message.content.trim() }}</text> <text v-else>加载中...</text> </view> </template> <script> export default { data() { return { message: null }; }, onLoad() { this.loadMessage(); }, methods: { loadMessage() { setTimeout(() => { this.message = { content: "Hello, World!" }; // 模拟异步加载 }, 2000); } } }; </script> ``` --- ### 注意事项 - 如果问题仍未解决，请检查微信开发者工具的日志输出，定位具体出错位置。 - 确保所有依赖库均已正确安装并更新至最新版本。