Refreshing url by vue.js-CodePudding

I refresh my page vie window.location.reload and setTimout. Its worked fine but when I change a url the reload functions tick one last time in a another page. Using laravel, inertia, vue.js

thats my code. Any idea how to fix that?

<script setup>

import { Inertia } from "@inertiajs/inertia";
import { useForm } from '@inertiajs/inertia-vue3'


</script>

<template>

...content

</template>


<script>


    methods: {
        reloadPage() {
            window.location.reload();
        },
        reload() {
            setTimeout(this.reloadPage, 10000);
        }
    },
    mounted() {
        this.reload();
    },
    Unmount(){
        clearTimeout(this.reload());
    }

};


</script>

sorry for my poor english :) and Thanks

CodePudding user response：

Started using vue.js recently, so bear with me. I think you need to pass the timeoutId into clearTimeout. Since you haven't done that, setTimeout() is running even after the component has been unmounted.

This should work for you!

export default {
  data: () => ({
    timeoutId: null,
  }),
  methods: {
    reloadPage() {
      window.location.reload();
    },
    reload() {
      this.timeoutId = setTimeout(this.reloadPage, 10000);
    },
  },
  mounted() {
    this.reload();
  },
  beforeUnmount() {
    clearTimeout(this.timeoutId);
  },
};