How do I refresh of re-render a component through vue routes?

When I click on a list item I my navigation I go back to the main page:

Vue navigation

<v-list-item to="/">
    
    <div class="d-flex">Activity Feed</div>

</v-list-item>

Vue Route

{
    path: '/',
    name: '',
    get component() {
      if(store.state.user && store.state.user.is_counsellor === 1) {
        return CounsellorActivity
      } else {
        return Activity
      }
    },
    children: [
      { name: 'records', path: '', component: Records },
    ]
  },

In the Records component I load a bunch of records on mount based that's context is based on parameters assigned to the user:

mounted() {
    if(this.user.is_counsellor === 1){
        this.getCounsellorFeed()
    } else {
        this.getRecords()
    }
},

I have a bunch of ways that sort records in the component, and what I want to do is reload this.getCounsellorFeed() in the record component when <v-list-item to="/"> is clicked on on the same page slash route. I also don't want to reload the whole page. Just the record component.

rodrigo.pedra

5 years ago

Level 56

Try using a in-component route guard. I would try using beforeRouteEnter instead of mounted:

beforeRouteEnter (to, from, next) {
  next(vm => {
    if(vm.user.is_counsellor === 1){
        vm.getCounsellorFeed()
    } else {
        vm.getRecords()
    }
  })
}

Note you need to use vm instead of this as the this context is unavailable in this guard.

Reference https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

Corbin

5 years ago

Best Answer

Level 9

@rodrigo.pedra thanks for the help. I didn't see the notification and I figured out another way. Maybe you can tell me what way is better?

Here's what I did. On the navigation I created a click event that would see what the current route is. If on the current route I just reload the records, if not I go to the route:

Template

<v-list-item @click="pushRouteOrReloadRecords()">
    
    <div class="d-flex">Activity Feed</div>

</v-list-item>

Method

pushRouteOrReloadRecords(){
    if(this.$router.currentRoute.name == 'records'){
        this.$store.dispatch("getCounsellorFeed")
    } else {
        this.$router.push({ name: 'records' })
    }
}

rodrigo.pedra

5 years ago

Level 56

No problem. Re-reading your first post I guess your solution fits your requirements better.

I am not sure if the beforeRouteEnter will be triggered if the user is already on that page.

But either way, if you didn't know about that, now you know!

Thanks for the response and have a nice day =)

1 like

Corbin

5 years ago

Level 9

Thanks for the help pal!

1 like

Please or to participate in this conversation.