Почему при переходе (или перезагрузке) на страницу — сначала рендерится главная страница, а после — текущая?

Question

luckyjenro0 @luckyjenro0

Nuxt.js

Почему при переходе (или перезагрузке) на страницу — сначала рендерится главная страница, а после — текущая?

Есть такой роутер:

routes.push(
        {
          name: "index",
          path: "/",
          component: resolve(__dirname, "pages/index.vue"),
        },
        {
          name: "goods",
          path: "/goods",
          component: resolve(__dirname, "pages/goods/index.vue"),
        },
        {
          name: "good-info",
          path: "/goods/info/:id",
          component: resolve(__dirname, "pages/good/index.vue"),
        }
      );

Роут /goods/info/23 (Например) - динамический, но когда я захожу на него не через nuxt-link, а через перезагрузку страницы например, или просто вбиваю его в адресную строку, то сначала рендерится главная страница (/), потом исчезает быстро и появляется нужная страница, то есть как бы рендерится страница (компонент) главная (/), а потом исчезает и рендерится нужная страница с динамическим параметром.

Вот layouts/default.vue:

<template>
  <div id="__default">
    <header__></header__>

    <transition name="fade">
      <nuxt />
    </transition>

    <footer__></footer__>

    <transition name="fade" mode="out-in">
      <div v-show="!load" id="__loader">
        <svg
          style="height: 120px; width: 120px"
          class="spinner"
          viewBox="0 0 50 50"
        >
          <circle
            class="path"
            cx="25"
            cy="25"
            r="20"
            fill="none"
            stroke-width="3"
          ></circle>
        </svg>
      </div>
    </transition>
  </div>
</template>

<script>
import header__ from "@/components/layout/header";
import footer__ from "@/components/layout/footer";

export default {
  watch: {
    $route(to, from) {
      setTimeout(() => {
        $("[data-router-link-mobile]").removeClass("active");
        $("#" + to.name + "__mobile__router").addClass("active");

        $("[data-router-link-pc]").removeClass("active");
        $("#" + to.name + "__pc__router").addClass("active");
      }, 250);

      this.$nextTick(() => {
        this.$nuxt.$loading.start();
        setTimeout(() => this.$nuxt.$loading.finish(), 250);
      });
    },
  },
  components: {
    header__,
    footer__,
  },
  computed: {
    load() {
      return this.$store.state.load;
    },
  },
  mounted() {
    setTimeout(() => {
      this.$store.commit("setLoad");

      setTimeout(() => {
        $("[data-router-link-mobile]").removeClass("active");
        $("#" + this.$route.name + "__mobile__router").addClass("active");

        $("[data-router-link-pc]").removeClass("active");
        $("#" + this.$route.name + "__pc__router").addClass("active");
      }, 250);
    }, 250);
  },
};
</script>

Вот сама страница с динамическим параметром:

<template>
  <div class="content">
    <div class="container">asdasd</div>
  </div>
</template>

<script>
export default {
  async fetch({ params }) {
    const data = [1, 2, 3];

    return { goods: data };
  },

  data() {
    return {
      goods: null,
    };
  },
  mounted() {
    console.log(1);
  },
};
</script>

<style scoped>
@media screen and (max-width: 530px) {
}
</style>