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
    }
  ]
}

ChannelsPage ：

<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可以明显看出，调用create的{{1}}钩子会发出事件，并且ProfileInnerComponent会将div与当前时间相加。

Answer 1

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

<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

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

管理员和用户，每个页面都有一个counter，其初始值为0。

因此，当您进入“管理员”页面并增加计数器时，要导航到另一个页面并返回到“管理员”页面，计数器就如您离开计数器一样。

为此，我制作了一个sandbox。还请保持打开控制台的状态，以查看渲染组件的次数。

注意，在沙盒示例中说明了实现此操作的逻辑。切勿在{{1}}的{{1}}中使用keep-alive。

Answer 3

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

// 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>

通过关键参数保持有效的视图路由器

3 个答案: