I can't figure out how to implement reloading the page before going to it?

Question

Vue.js

I have a page, the vue component is responsible for it, when you go to this page, data is loaded using getdataindex.

import axios from 'axios';
    export default {
        data:function(){
            return{
                subs:null,
                posts:null,
                tags:null,
            }
        },
        methods:{
            getdataindex:function () {
                axios
                    .get('/api/getindexdata')
                    .then(response => {
                        this.subs = response.data.subs;
                        this.posts = response.data.posts;
                        this.tags = response.data.tags;
                    });
            }
        },
    }

I want to load the page before going to it. I read that you need to use beforeRouteEnter and request data from the server in it. Help on my example, how to implement?

Answer 1

import axios from 'axios';
    export default {
        data:function(){
            return{
                subs:null,
                posts:null,
                tags:null,
            }
        },
        beforeRouteEnter(_, __, next) {
          axios.get('/api/getindexdata').then(response => {
            next(vm => {
              vm.subs = response.data.subs;
              vm.posts = response.data.posts;
              vm.tags = response.data.tags;
            })
          });
        }
    }