1

使用 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。然后将结果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 无法按预期工作，其中在路由中找到的匹配项未true在filters数据中设置为。
  • ComponentB /componentb?size=1m 确实按预期工作，其中在路由中找到的匹配项设置为true数据中filters。
4

2 回答 2

2

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

于 2021-03-24T04:11:37.880 回答
2

我只能在router-view没有键控的情况下重现问题，所以我假设这就是你所拥有的。

router-link如果同一个组件有两个s 但size查询参数不同（如下图），并且你点击一个链接然后另一个链接，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 键on $route.fullPath（包括查询参数）：

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

演示

于 2021-03-25T05:39:17.103 回答