pagination in Vue js

Question

I am observing the url parameter to make a pagination in Vue.js3

In my onMounted I take the parameter and look for the parameter’s reference page in the Beck end (if it is 1 I will fetch the first page 2 the second so it goes), the Beck end will return me 5 records the total number of records total number of pages and number of the current page.

I take this and mount the screen

   const {
      params: { page },
    } = useRoute();
    const getpage = () => {
      return page ? page : store.state.page;
    };
   onMounted(async () => {
      const onGetTributo = async page => {
        if (!page) page = 1;
        try {
          var resp = await servico.getGridPage(page);

          return [resp.itens, resp];
        } catch (err) {
          console.error("Erro ao buscar Tributo!", err);
        }
      }; 
      
      itensPaginacao = await onGetTributo(page);
     

    });

Return from the back end

there to do the navigation I have a function that makes

 router.push("/tributo/" + page)

The behavior that I hope he had was to navigate to the new url with the new parameter and that he would mount the component again but he only navigates and I have to give an F5 to show the new content

To work for now I did:

 const newContentTable = (page) => {
      router.push("/tributo/" + page)
      setInterval(function(){ document.location.reload(true); }, 10);
      console.log("/tributo/" + page)
    };

My doubt is what is the right way to reload this component when I navigate to the next page

Answer 1

The behavior I expected him to have was to navigate to the new url with the new parameter and have it assemble the component again, but it just navigates and I have to give a F5 to show the new content.

You need to do Vue to force the component to be re-rendered to be reloaded. There are two ways to do this, when you use Vueroute.

The first way is using key.

<router-view :key="$route.path" />

When you use the key and it is modified, Vue writes the component again.

The second is using a watch to verify changes in the $route.

methods: {

    created() {
        this.carregarDados();
    },
    carregarDados() {
         api.get(`dados/${this.$route.params.id}`);
    },
},
watch: {
   $route() {
       this.carregarDados();
   }
}

A third option is to use the Navigations Guard:

beforeRouteUpdate (to, from, next) {
  // just use `this`
  api.get(`dados/${to.params.id}`);
  next();
}