Vue Router Keep-Alive Include not working

Question

I've a Vue Router like this:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Inbox',
      component: Inbox
    }]
})

In the main app.vue I've:

  <div id="app">
    <main>
      <keep-alive include="Inbox">
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>

It won't work, but if I remove the include it works (in all routes). What is missing here for the keep-alive only work in the Inbox component?

Answer 1

Your route is named but your component is not, therefore keep-alive include="Inbox" is not applying to any components.

The fix is to add name: 'Inbox' to your component definition for Inbox