H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue-router中如何对不同的路由设置不同的keep-alive

我想编写一个 list-detail 结构的 app,这样一来,我需要 detail 组件每次都被刷新,而 list 组件要保持原来的滚动位置。
但现在 list 组件和 detail 组件位于不同的路由下,应该如何设置?
如果直接给 router-view 加上 keep-alive 的话,detail 组件也会保持滚动位置,但我不希望这样。

router.map({
    '/':                    {
        component: Home
    },
    '/songs':               {
        component: SongList
    },
    '/leaderboard/:songId': {
        component: Leaderboard
    }
})

回答:

增加 router.meta 属性

// routes 配置
export default [
{

path: '/',
name: 'home',
component: Home,
meta: {
  keepAlive: true // 需要被缓存
}

}, {

path: '/:id',
name: 'edit',
component: Edit,
meta: {
  keepAlive: false // 不需要被缓存
}

}
]
<keep-alive>

<router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>

</keep-alive>

<router-view v-if=”!$route.meta.keepAlive”>

<!-- 这里是不被缓存的视图组件,比如 Edit! -->

</router-view>

作者:RoamIn
链接:http://www.jianshu.com/p/0b02…
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

回答:

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在meta里设置keepAlive啊, app里要写2个router-view

回答:

这个问题今天困扰了我一下午,非常头痛。但是经过反复的翻阅文档,我找到了适合我目前的需求的解决办法。

一般来说,我们想让 keep-alive 的组件重新渲染,基本上都只是想更新它的数据而已,而VUE本来也是以数据驱动视图,所以能更新数据就已经足够了。

具体做法是在 activated 钩子里做数据更新就可以了,因为keep-alive每次都会调用这个钩子的。

        activated(){
          console.log('缓存的组件又出现了,我是不是要重新拉取数据呢?')
        }

如果有像我目前的需求的:组件不是每次都要更新数据的,比如点击同一个订单的详情,那我就不需要更新详情页面的数据,只有在点击不同订单时,才更新详情。

可以在上面做法的基础上再加一个 watch,如下:

         watch:{
          order_id(val){
            console.log('订单改变了,我要重新拉取订单详情了');
            //如果订单ID相同,是不会触发这个watcher的,所以就不拉取新详情
          }
        },
        activated(){
          this.order_id = this.$route.params.order_id;
        },

菜鸟一只,如有不对的地方,或哪位有更好的实现方法,希望能分享分享哦。
我用的是 VUE2.0 希望能帮到各位。

回答:

router-view设置了keep-alive就全都生效,没办法。

本文地址:H5W3 » vue-router中如何对不同的路由设置不同的keep-alive

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址