How to reload component from Vue Router link

Question

I have a sidebar with a list of vue router-links and I was hoping that if a active menu item is clicked it can reload that page since those components/pages the vue-router link goes to has some api calls pulling fresh data on mount. My current issue is if the current router link is already active it does nothing as the route is already achieved so the component is already loaded and will not be reloaded or remounted. Is this doable with just router-link?

                        <ul>
                        <li v-for="(item,i) in MainNavLinks"
                            :key="i"
                            :class="{'active-main-menu-item': i === activeIconIndex}"
                            v-on:click="selectIconItem(i,$event)">
                            <router-link v-if="item.link != '#'" :to="item.link"><i :class="item.icon"></i></router-link>
                            <v-btn v-if="item.link == '#'"
                                   icon
                                   color="white">
                                <i v-if="item.link == '#'" :class="item.icon"></i>
                            </v-btn>
                        </li>
                        <li>
                            <router-link v-if="sandboxPermission == true" to="/sandbox"><i class="fa-solid fa-file-code"></i></router-link>
                        </li>
                    </ul>

Does this answer your question? [Force vue 3 router to got to the same route twice - recognize it as a new event](https://stackoverflow.com/questions/72027066/force-vue-3-router-to-got-to-the-same-route-twice-recognize-it-as-a-new-event) — Duannx, Jun 14 '23 at 01:29
@duannx I tried adding :to="{ path: item.link, force: true }" to the router-link part in my code and it does nothing. Do I need to add something else or shouldnt this parameter solve my problem? — Irish Redneck, Jun 14 '23 at 13:57

How to reload component from Vue Router link

0 Answers0