通过关键参数保持活动视图路由器

Question

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

TL:DR：

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

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

常见的方法是：

router.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-router 和 keep-alive 吗？

编辑：

请查看sandbox。每次在页面之间切换 (#1,#2,#3,#4) Vue 从头开始​​创建新组件 ProfileInnerComponent（而不是像 v-show 那样从缓存中）。这通过检查红色 div 很明显，ProfileInnerComponent 的 create 钩子被调用，它发出事件，App 将 div 添加到当前时间。

Answer 1

为了使其工作，您需要在组件上使用唯一名称，然后您将使用 <keep-alive> 上的 include 属性。

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

在您的情况下，使用动态组件而不是单个路由会更好。

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

keep-alive with Dynamic Components

keep-alive API reference

更新

根据查询参数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.
    }
  }
}

Answer 2

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

// in App.vue

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

和

//in Profile.vue

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

Answer 3

我不确定我是否理解正确，但假设您有 2 页。

Admins 和 Users，每个页面都有一个 counter，最初为 0。

因此，当您在管理员页面并增加计数器时，您希望在导航到另一个页面并返回管理员页面时计数器与您离开时一样。

我为此做了一个sandbox。另外请保持打开控制台查看组件被渲染了多少次。

注意，在沙盒示例中，说明了如何实现这一点的逻辑。切勿在router-view 中使用keep-alive App.vue。