0

我有一个分页组件。该async setup()方法从 API 中提取数据以填充页面。直接加载路由时它工作正常，但是当我将路由更改为不同的页面 slug（例如单击路由器链接）时，组件不会重新加载并且setup不会再次执行以获取新数据。

我想我想强制重新加载组件？

这是我的MainApp组件，它具有路由器视图和后备。

<router-view v-slot="{ Component }">
    <Suspense>
        <template #default>
            <component :is="Component" />
        </template>
        <template #fallback>
            loading...
        </template>
    </Suspense>
</router-view>

路由器看起来有点像。您会看到页面组件采用page_slug：

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "",
    component: MainApp,
    children: [
        {
            name: "page",
            path: "page/:page_slug",
            component: Page,
            props: true,
        },
        // [...]
    ]
  }

这就是我的 Page 组件的样子。它使用page_slug从 API 加载数据，然后在模板中使用：


<template>
    <div> {{ pageData }} </div>
</template>

export default defineComponent({
  name: "Page",
  props: {
    page_slug: {
      type: String,
      required: true,
    },
  },
  async setup(props) {

      const pageData = await store.dispatch("getPageData", {
        page_slug: props.page_slug
      });

      return { pageData }
  }
}

当我直接打开路由时，会很好地显示回退“正在加载...”，直到返回数据并渲染组件。但是当我对另一个页面进行路由更改时，则async setup()不会再次执行。在这种情况下，浏览器中的 url 会更新，但数据保持不变。

我该如何解决这个案子？我是否必须以某种方式强制重新加载组件？或者对数据加载有完全不同的架构？

4

0 回答 0