Multi tool use

Keep alive view-router by key param

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.

Vue

ProfileInnerComponent

create

ProfileInnerComponent

App

Some component created again time ??

2 Answers
2

In order this to work you need unique names on your components, which you would then use the include property on <keep-alive>.

include

<keep-alive>

<keep-alive include="Foo,Bar">
...
</keep-alive>


In you case, you would be better served using dynamic components rather than a single route.

<component :is="$route.params.id"></component>


keep-alive with Dynamic Components

keep-alive API reference

update

Pre-fetching channel content based on the query param id:

// routes.js
routes = [
{
path: '/channel/:id',
name: 'show.channel',
props: true,
component: Channel
}
...
]

// Channel.vue
import axios from 'axios'

export default {
data () {
return {
content: ''
}
}
beforeRouteEnter(to,from,next) {
axios.get('/api/channel/' + to.params.id).then(response => {
next(vm => {
vm.content = reponse.data
})
})
},
watch: {
'$route' (to, from) {
// fetch new channel content when a query param is changed.
}
}
}


Channel

:id

Channel

/channel/:id

beforeRouteEnter

channels

Channel

watch: { '$route' }

beforeRouteUpdate

Channel

channel#1

channel#2

API

route

channel

I am not sure if i understand correctly but lets suppose you have 2 pages.

Admins and Users and each page has an counter which is initially 0.

counter

So you want when you are in Admins page and you increasing the counter,when navigating to another page and return back to Admins page the counter to be as you have left it.

I made a sandbox for this.Also please keep open the console to see how many times the components is rendered.

NOTE that in the sandbox example,is illustrated the logic how to achieve this.Never use keep-alive in router-view in App.vue.

router-view

App.vue

page

A.vue

B.vue

Common.vue

:id

pageA

pageB

pageA

pageA

Channel.vue

Channel.vue

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.