Reload page on specific routes

[seahindeniz]

What problem does this feature solve?

Some pages may need to page reload when their router link gets clicked.
I have Google'd it and search older issues, but found nothing that suggests an organic way to achieve it.

What does the proposed API look like?

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/csp-1",
      name: "csp-1",
      component: () => import("../views/CSP-1.vue"),
      // new optional property reload/reloadOnSwitch/reloadOnRedirect etc.
      reload: true
    },
  ],
});

I've tried an alternative solution which works, but it doesn't look organic

<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from "vue-router";

const router = useRouter();

const redirectWithReload = async (path: string): Promise<void> => {
  await router.push({ path });
  router.go(0);
};
</script>

<template>
  <header class="my-7">
    <nav>
      <RouterLink to="/">Home (SPA)</RouterLink>
      <RouterLink to="/about">About (SPA)</RouterLink>
      <a
        href="/csp-1"
        :class="{
          'router-link-active router-link-exact-active':
            router.currentRoute.value.name === 'csp-1',
        }"
        @click="redirectWithReload('csp-1')"
        >CSP 1 (reload)</a
      >
    </nav>
  </header>

  <RouterView />
</template>

[posva]

Duplicate of #1257

[posva]

Please, search existing issues and pull requests before opening issues, it saves maintainers a lot of time 🙏