Vue Router lifecycle: onRouteUpdateDuplicate

[Mini-ghost]

• Start Date: 2023-01-29
• Target Major Version: Vue 3, Vue Router 4
• Reference Issues:
  • Force navigation when clicking on a router-link even if the route doesn't change vue-router#974
  • Force reload when clicking on a router-link even if the route doesn't change router#1257
• Implementation PR: - https://github.com/Mini-ghost/router/tree/feat/duplicate-route-callback

Summary

In the common multi-page websites, the default behavior when we click on any hyperlink is to reload even if it is the same as current one.

But the same scenario in the single-page application, Vue Router will not to reload the page when the user clicks on the hyperlink that point to the same path. This makes sense, but sometimes we still need to reload some data on this page.

This RCF provides a solution where we can do something when routes are push or redirect to duplicate routes.

Basic example

In the example below, this page has two APIs, one to fetch advertisement and the other to fetch a list of products.

When the user clicks a link on this page, it happens that the path of the link point is the same as the current page, and the application can capture it to refresh the product data.

<script setup lang="ts">
// Route: '/products'
import { onRouteUpdateDuplicate } from 'vue-router'

import useFetchAdBanner from '@/server/useFetchAdBanner'
import useFetchProducts from '@/server/useFetchProducts'

const { data: adBanner, refresh: refreshAdBanner } = useFetchAdBanner()
const { data: products, refresh: refreshProducts } = useFetchProducts()

onRouteUpdateDuplicate(() => {
  refreshProducts()
})
</script>

<template>
  <div>
    <RouterLink to="/products">
      Products
    </RouterLink>
  </div>
</template>

Motivation

Many scenarios require such functionality, such as Facebook or Twitter, when we click on a link from the same page, the application will not do nothing, it will update the timeline data to get the latest post.

In order to do this function more conveniently, we may need this lifecycle: onRouteUpdateDuplicate()

Detailed design

Composition API

Registers a callback to be called when pushes or redirects to duplicate route.

• Type

  function onRouteUpdateDuplicate (duplicateCallback: () => void | Promise<void>)): void

• Details

  The following situations are considered as route duplication

  • Click the link, and the link points to the same path as the current one.
  • Change the page through program execution, such as: router.push() or router.replace(), but the specified route is completely consistent with the current path after parsing.

• Example

  <script setup lang="ts">
  import { onRouteUpdateDuplicate } from 'vue-router'
  import useFetchProducts from '@/server/useFetchProducts'
  
  const { data: products, refresh: refreshProducts } = useFetchProducts()
  
  onRouteUpdateDuplicate(() => {
    refreshProducts()
  })
  </script>

Options API

Call when the router is navigating to duplicate route.

• Type

  interface ComponentOptions {
    routeUpdateDuplicate?(this: ComponentPublicInstance): void | Promise<void>
  }

• Example

  <script lang="ts">
  import { computed, defineComponent } from 'vue';
  
  export default defineComponent({
    routeUpdateDuplicate() {
      this.fetchProducts();
    },
    methods: {
      fetchProducts() {
        // fetch implement
      },
    },
  });
  </script>

Drawbacks

N/A

Alternatives

Naming

Variables could be named differently and proposals are welcome.

Other solutions

Before this solution is implemented, we still has the other way to solve this problem, but it is a little bit annoying.

We can create a <CustomLink> based hook system that depends on a library like unjs/hookable or developit/mitt, here is a quick demo.

<CustomLink>:

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import hooks from '@/plugins/global-hooks'

import type { RouteLocationRaw } from 'vue-router'

const props = defineProps<{
  to: RouteLocationRaw
}>()

const { currentRoute, resolve } = useRouter()

const isDuplicate = computed(() => {
  return currentRoute.value.fullPath === resolve(props.to)
})

function onClick () {
  isDuplicate.value && hooks.callHook('route-update-duplicate')
}
</script>

<template>
  <RouterLink :to="to" v-bind="$attrs" @click.prevent="onClick">
    <slot name="default" />
  </RouterLink>
</template>

And in page component:

<script setup lang="ts">
// Route: '/products'
import hooks from '@/plugins/global-hooks'

import useFetchAdBanner from '@/server/useFetchAdBanner'
import useFetchProducts from '@/server/useFetchProducts'

const { data: adBanner, refresh: refreshAdBanner } = useFetchAdBanner()
const { data: products, refresh: refreshProducts } = useFetchProducts()

hooks.hook('route-update-duplicate', () => {
  refreshProducts()
})
</script>

<template>
  <div>
    <CustomLink to="/products">
      Products
    </CustomLink>
  </div>
</template>

Adoption strategy

This feature is additive and doesn't affect existing usage.

Unresolved questions

N/A