Vuejs and Page Refresh on <router-link> click

Question

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();
    });
  }
};

"I don't want to use onclick="window.location.reload();"" 👈 why not? — Phil
– Phil, Commented Mar 30, 2020 at 3:41
Vue is an un-opinionated UI framework. There is no "Vue version" of this sort of action. You can use whatever works — Phil
– Phil, Commented Mar 30, 2020 at 3:50
I have never used Laravel in my life and don't know anything about data table UI components. — Phil
– Phil, Commented Mar 30, 2020 at 3:54

Rijosh · Accepted Answer · 2020-03-30 03:50:47Z

7

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 Mar 30, 2020 at 3:50

Rijosh

1,5641 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rijosh Over a year ago

Please check this link : matanya.gitbook.io/vue-tables-2 or you can try datatable in Vuetify (vuetifyjs.com/en/components/data-tables). I always use custom tables for my purpose ;)

Fenix Over a year ago

Using a with $router works great (+1). It passes original route parameters as well. However, if different or additional parameter is required, use params, eg: <a :href="$router.resolve({name: 'routeName', params: {id: anotherId} }).href"

Collectives™ on Stack Overflow

Vuejs and Page Refresh on <router-link> click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related