Vuejs and Page Refresh on click

Posted By: Anonymous

I want to make a page refresh after I click on the router-link. How can I do that with Vue JS in Laravel? but I don’t want to use onclick="window.location.reload();"

My code is something like that-

Code in app.js

{
    path: '/publisher',
    component: require('./components/Publishers.vue').default,
  }

Code in Master.blade.php

<li> <router-link to="/publisher" class="nav-link"  >انتشارات</router-link></li>

Code in publishers.vue

export default {
  components: {  
  },
  data() {
    return {
     
      Publishers: {},
     
    };
  },
  computed: {},
  methods: {    
    loadPublishers() {
      this.$Progress.start();
      axios.get("api/publisher").then(({ data }) => (this.Publishers = data));
    },
  },

  created() {
    this.loadPublishers();
    // load the page after 3 secound
    Fire.$on("refreshPage", () => {
      this.loadPublishers();
    });
  }
};

Solution

You can add a name property to the route object and instead of using <router-link>, you can use an a tag like this

<a :href="$router.resolve({name: 'publisher'}).href">link</a>

Your route object will be like

{
    path: '/publisher',
    name: 'publisher',
    component: require('./components/Publishers.vue').default,
}

The name field in the router is not mandatory, it is using only for making it simple to use.

Answered By: Anonymous

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.