使用相同子组件的两个不同路由正在以不同方式评估数据

Question

使用Vue3和vue-router4，两个不同的组件共享相同的子组件。组件模板设置如下：

<!-- Component A -->
<template>
  <ComponentA>
    <Child />
  </ComponentA>
</template>

<!-- Component B -->
<template>
  <ComponentB>
    <Child />
  </ComponentB>
</template>

<!-- Child -->
<template>
  <FilterResults />
</template>

这些是配置的路由：

const routes = [
    {
        path:'/componenta/:param',
        component: ComponentA
    },
    {
        path:'/componentb',
        component: ComponentB
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

Child 组件中设置了一些数据：

export default {
  name: 'Child'
  ...,
  data() {
    return {
      filters: {
        size: [
          {
            selected: this.$route.query.size === "1m"
          }
        ]
      }
    }
  }
}

以上旨在根据是否在路由中找到匹配项将selected设置为true或false。然后将结果作为 prop:

传递到 FilterResults

<!-- Component A -->
<template>
  <ComponentA>
    <Child />
  </ComponentA>
</template>

<!-- Component B -->
<template>
  <ComponentB>
    <Child />
  </ComponentB>
</template>

<!-- Child -->
<template>
  <FilterResults :filters="filters" />
</template>

通过上面的代码，过滤器数据中 selected 的值被评估，预期的结果是当组件加载时，$route 中的过滤器被设置为 true数据。

问题是，ComponentA 和 ComponentB 的子组件相同：

ComponentA /componenta/xyz?size=1m 没有按预期工作，在路径 中找到的匹配项未 设置filters 数据中的 true。
ComponentB /componentb?size=1m 是否按预期工作，在路径 中找到的匹配项 设置为 true 在 filters 数据中。

Answer 1

在我看来，问题就在这里，你的数据没有在路线变化时重新计算，尝试修改路由更改的本地数据。尝试在数据中的return语句之前添加调试器，即使更改路由也只会出现一个。

Answer 2

仅当 router-view 未键入时我才能重现该问题，所以我假设这就是您所拥有的。

如果同一个组件有两个 router-link 但具有不同的 size 查询参数（如下所示），并且您单击一个 link 然后另一个，vue重用了已有的组件实例，所以组件的data()没有被调用，查询参数也没有重新求值

<router-link to="/componenta/xyz?size=1m">A (size=1m)</router-link> |
<router-link to="/componenta/xyz?size=0">A (size=0)</router-link> |

为确保为每次路由更改创建新组件，请指定 router-view key on $route.fullPath（包括查询参数）：

<router-view :key="$route.fullPath"></router-view>

demo

使用相同子组件的两个不同路由正在以不同方式评估数据

Two different routes using the same child components are evaluating data differently

javascript

vuejs3

vue-router4