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

发布于
2016-09-17

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

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

vue.js vue-router

阅读 12.3k

5 个回答

得票最新

imydou

2635

发布于
2017-10-10

增加 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...
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

风笛

49518

发布于
2017-09-27

<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 希望能帮到各位。