配合v-if在App端不生效问题

ouzexi commented 2 years ago

问题描述 我在路由跳转时传递参数，通过$Route.query的参数判断是否渲染元素。在H5端正常判断，在App端不生效，始终渲染v-if的元素。

<topo-empty v-if="$Route.query.isEmpty" />
<view v-else class="bg" />

复现步骤

A页面使用push方法跳转至B页面，携带query参数
B页面通过v-if配置query的参数判断是否渲染元素
H5端生效，App端始终渲染包含v-if的标签元素

A页面

this.$Router.push({
                path: '/pages/intelligent-networking/inet-topo/index',
                query: {
                    isEmpty: true
                }
            })

B页面

<topo-empty v-if="$Route.query.isEmpty" />
<view v-else class="bg">...省略</view>

预期结果 当isEmpty为true时，渲染topo-empty组件当isEmpty为false时，渲染class="bg"的元素

实际结果 isEmpty为true或false时，在App端均渲染topo-empty组件

系统信息:

发行平台: App
操作系统 Android
HBuilderX版本非HBX，为vscode
项目创建方法 vue-cli
设备信息安卓
uni-simple-router版本 [2.0.7]

补充信息 初步估计问题有关生命周期

SilurianYang commented 2 years ago

首先 $Route 目前是非响应式数据其次在非深度传参时读取的参数为字符串。你可以这样试试


this.$Router.push({
                path: '/pages/intelligent-networking/inet-topo/index',
                query: {
                    status:{
                         isEmpty:true
                    }
                }
            })

//  Get

$Route.query.status.isEmpty

ouzexi commented 2 years ago

谢谢大佬，果然问题解决了！！！“在非深度传参时读取的参数为字符串”这一特点确实容易忽略

SilurianYang / uni-simple-router

配合v-if在App端不生效问题 #408