title: Keep alive view-router by key param
body: <p>How do I keep vue-router alive with different params separately? </p>
  
  <p><strong>TL:DR</strong>:</p>
  
  <p>Let's consider an example when we're developing a website like facebook. Each user has a profile page. Because there are a lot of users we don't want to iterate all users and load all profile page on load like bellow</p>
  
  <pre><code>&lt;template v-for="profile in profilePages"&gt;
     &lt;profile-page :data="profile" v-show="this.route.params['id'] === channel.id"/&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The common approach would be:</p>
  
  <p><strong>router.js</strong>:</p>
  
  <pre><code>{
    component: ProfileWrapper,
    path: '/profile',
    children: [
      {
        path: ':id',
        component: ProfilePage
      }
    ]
  }
  </code></pre>
  
  <p><strong>ChannelsPage</strong>:</p>
  
  <pre><code>&lt;keep-alive&gt;
     &lt;router-view :=key="$route.fullPath"&gt;&lt;/router-view&gt;
  &lt;/keep-alive&gt;
  </code></pre>
  
  <p>But here's the issue. Since user visits someone's page and navigates away, I want the router to keep it alive in cache somewhere, or just hide it. In my particular case, user visits 2-3 profile at most and switches a lot between them. And switching operation is time costly, because there are a lot of DOM in it.</p>
  
  <p>Can I do it with <strong>vue-router</strong> and <strong>keep-alive</strong>?</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Please check the <a href="https://codesandbox.io/s/xo0kokomyz" rel="noreferrer">sandbox</a>. Each time you switch between pages (#1,#2,#3,#4) <code>Vue</code> creates new components <code>ProfileInnerComponent</code> from the scratch (not from the cache like v-show). That's noticeably by checking red div, the <code>create</code> hook of <code>ProfileInnerComponent</code> is called, which emits the event, and <code>App</code> adds the div with current time.</p>