//router配置 new Rout" />

小言_互联网的博客

Vue中keep-alive配合router-view缓存路由

480人阅读  评论(0)

vue 2.1.0 之前:

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

//router配置
new Router({
    routes: [
        {
            name: 'a',
            path: '/a',
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: 'b',
            path: '/b',
            component: B,
            meta: {
                keepAlive: false
            }
        }
    ]
})

vue 2.1.0 之后:

2.1.0 新增:
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <router-view></router-view>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <router-view></router-view>
</keep-alive>

转载:https://blog.csdn.net/xjf106/article/details/101710166
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场