Leaving the route causes the trigger parameter to change to undefined

[awdr74100]

Please forgive me if I put the question in the wrong place.

Based on the following routing structure:

├─ pages/
│   └─ posts
│         ├─ [id].vue
│         └─ index.vue
│   │
│   ├─ index.vue
│   └─ posts.vue

App.vue:

<template>
  <Navbar :paths="['/', '/posts']" />
  <RouterView />
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router/auto';
import Navbar from '@/components/Navbar.vue';
</script>

<style scoped></style>

pages/posts.vue:

<template>
  <Navbar :paths="['/posts/1', '/posts/2', '/posts/3', '/posts/4']" />
  <RouterView />
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router/auto';
import Navbar from '@/components/Navbar.vue';
</script>

<style scoped></style>

pages/posts/index.vue:

<script setup lang="ts">
import { useFetch } from '@vueuse/core';
import type { Post } from '@/types';

const url = `${import.meta.env.VITE_BACKEND_URL}/posts`;
const { isFetching, error, data: posts } = useFetch(url).get().json<Post[]>();
</script>

pages/posts/[id].vue:

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router/auto';
import { useFetch } from '@vueuse/core';
import type { Post } from '@/types';

const route = useRoute('/posts/[id]');

const url = ref(`${import.meta.env.VITE_BACKEND_URL}/posts/${route.params.id}`);
const {
  isFetching,
  error,
  data: post,
} = useFetch(url, { refetch: true }).get().json<Post>();

watch(
  () => route.params.id,
  (newId) => {
    console.log(newId); // Check

    if (newId === undefined) return;
    url.value = `${import.meta.env.VITE_BACKEND_URL}/posts/${newId}`;
  },
);
</script>

When routing from /posts/2 to /posts, why is watch() in [id].vue triggered and newId will be undefined? [id].vue seems to trigger watch() again before it is destroyed. Is this the expected behavior?

related discussion: stackoverflow
main problem: why does the watch() trigger when a user has navigated away from [id].vue?

Thank you for your help!

[posva]

This is relative to the router but in I couldn't reproduce it. It was a problem in the past and it got fixed so maybe you are using an outdated version?

• watcher for a route param is called when a user leaved the route vuejs/core#2291

I updated the reproductions just to make sure but it seems to work. But a normal watcher shouldn't trigger in that case

[awdr74100]

@posva Thank you for your very prompt response and help!!

Minimal reproduction:

• https://github.com/awdr74100/vue-router-demo

Steps to reproduce:

1. click /users/c button
2. click /users button
3. check the console (will show the undefined)

/users/c to / will not trigger watch(), /users/c to /users triggers watch(). It seems that watch() is triggered again before the component instance is destroyed, which seems to behave the same as the reuse component instance of /users/c to /users/b.

Explicitly defining routes does present the same problem. I think I will raise this problem again at vuejs/router, thank you for your help!!

[posva]

It's worth trying to reproduce it using only Vue. In the issue I mentioned I added reproductions with Vue. Maybe adding a nested component reproduces the problem