How do I keep vue-router alive with different params separately?
TL:DR:
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
<template v-for="profile in profilePages">
<profile-page :data="profile" v-show="this.route.params['id'] === channel.id"/>
</template>
The common approach would be:
router.js:
{
component: ProfileWrapper,
path: '/profile',
children: [
{
path: ':id',
component: ProfilePage
}
]
}
ChannelsPage:
<keep-alive>
<router-view :=key="$route.fullPath"></router-view>
</keep-alive>
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.
Can I do it with vue-router and keep-alive?
EDIT:
Please check the sandbox. Each time you switch between pages (#1,#2,#3,#4) Vue
creates new components ProfileInnerComponent
from the scratch (not from the cache like v-show). That's noticeably by checking red div, the create
hook of ProfileInnerComponent
is called, which emits the event, and App
adds the div with current time.
Some component created again time ??
messages appear in console, which means vue rerenders page each time I switch it – deathangel908