Асинхронный компонент с разбивкой на страницы не запускает setup() при изменении маршрута

У меня есть компонент с разбивкой на страницы. Этот async setup()метод извлекает данные из API для заполнения страницы. Он отлично работает, когда маршрут загружается напрямую, но когда я меняю маршрут на другой слаг страницы (например, щелкнув ссылку маршрутизатора), компонент не перезагружается и 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_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-адрес в браузере обновляется, но данные остаются прежними.

Как я могу решить этот случай? Должен ли я как-то принудительно перезагружать компонент? Или у вас совершенно другая архитектура для загрузки данных?

Решение проблемы

Ответ прост, когда вы пытаетесь создать Vue 3 Single File Components (SFC) с помощью Composition API, как показано ниже:

<template>
 <!-- Your HTML code-->
</template>
<script>
export default {
 name: 'ComponentName',
 async setup():{
 // Your code
 }
};
</script>
<style>
/*Your Style Code*/
</style>

<script>, выполняется только один раз при первом импорте компонента. Таким образом, когда данные были изменены другим компонентом, указанный выше компонент не будет обновлен или, другими словами, не будет создан заново. Чтобы ваш компонент воссоздавался всякий раз, когда он собирается монтироваться, вы должны использовать <script setup>его, чтобы убедиться, что код внутри будет выполняться каждый раз, когда создается экземпляр компонента, но вам нужно переписать код скрипта с небольшими изменениями в сравнение при использовании setup()метода, а также вы можете использовать оба скрипта следующим образом:

<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()
// declare additional options
export default {
 name: "ComponentName",
 inheritAttrs: false,
 customOptions: {}
}
</script>
<script setup>
// executed in setup() scope (for each instance)
</script>

Внимательно прочитайте эту документацию, чтобы иметь полное представление.