通过关键参数保持视图路由器处于活动状态

如何分别使用不同的参数使 vue-router 保持活动状态？

TL:DR:

让我们考虑一个开发 Facebook 等网站的例子。每个用户都有一个个人资料页面。因为有很多用户，我们不想迭代所有用户并在加载时加载所有个人资料页面，如下所示

<template v-for="profile in profilePages">
   <profile-page :data="profile" v-show="this.route.params['id'] === channel.id"/>
</template>

常见的方法是：

路由器.js:

{
  component: ProfileWrapper,
  path: '/profile',
  children: [
    {
      path: ':id',
      component: ProfilePage
    }
  ]
}

频道页面:

<keep-alive>
   <router-view :=key="$route.fullPath"></router-view>
</keep-alive>

但这就是问题所在。由于用户访问某人的页面并导航离开，我希望路由器将其保留在某处的缓存中，或者只是将其隐藏。在我的特定情况下，用户最多访问 2-3 个个人资料，并在它们之间切换很多次。而且切换操作是很费时间的，因为里面有很多DOM。

我可以用vue-路由器 and 活着?

EDIT:

请检查sandbox https://codesandbox.io/s/xo0kokomyz。每次在页面之间切换（#1、#2、#3、#4）Vue创建新组件ProfileInnerComponent从头开始（不像 v-show 那样从缓存中）。通过检查红色 div 可以明显看出这一点create的钩子ProfileInnerComponent被调用，它发出事件，并且App添加带有当前时间的 div。

我通过添加以下代码更改了您的沙箱：

// in App.vue

<keep-alive>
   <router-view :key="$route.fullPath"></router-view>
</keep-alive>

and

//in Profile.vue

  <keep-alive>
    <profile-inner-component v-for="i in comps" :key="i" :data="i"/>
  </keep-alive>