Keeping Vue Router alive with Vue router links in Vue3

Question

Whenever I route between two views, the first view components are all reset! is there a way to keep the states of the first view without reset while routing? thanks in advance.

<div>
  <div id="titleControl">
    <router-link :to="{ name: 'controls' }" class="tablink borderLink">
      Controls
    </router-link>
    <router-link :to="{ name: 'logs' }" class="tablink borderLink">
      Logs
    </router-link>
  </div>

  <router-view />
</div>

score 0 · Accepted Answer · answered Nov 24 '22 at 05:56

0

One solution for this is wrapping the <router-view> inside the <KeepAlive> component.

answered Nov 24 '22 at 05:56

Neha Soni

3,935
2
10
32

I get this warning: `[Vue Router warn]: can no longer be used directly inside or . Use slot props instead: vue-router.mjs:35` – Bilal Feb 09 '23 at 15:07
An issue on GitHub has been reported regarding this- https://github.com/vuejs/router/issues/1306 – Neha Soni Feb 11 '23 at 03:19
And one more answer you can look into it for this warning- https://stackoverflow.com/questions/70848012/vue3-router-transitions-warnings – Neha Soni Feb 11 '23 at 03:19

Keeping Vue Router alive with Vue router links in Vue3

1 Answers1