标签：全局 实例 默认 from 状态 code -- route 类别
1、对于一层跳转，例如 A(列表页面) ->进入 B(详情页面) ->再到 A(列表页面)，建议用一下方式：
<keep-alive> <router-view :key="this.$route.path" v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view :key="this.$route.path" v-if="!$route.meta.keepAlive"></router-view>
2、对于多层跳转，比如，一个列表页（a)、详情页(b)和详情扩展页(c)，a -> b页面，a是缓存页，b需要在每次打开时，重新渲染；
b -> c页面，此时b需要被缓存，从c返回时，需要b保持不变。建议用一下方式：
<keep-alive :include="[‘A‘,‘B‘]"> <router-view></router-view> </keep-alive>
对于第二种方法官方提供三个属性：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="[‘a‘, ‘b‘]"> <component :is="view"></component> </keep-alive>
此处需要注意：
1、第二种方法需要路由入口必须唯一（即：页面当中只有一个<router-view></router-view>)，否则缓冲无效（路由都被缓冲）
2、:include="[‘A‘, ‘B‘]" 其中 A B 代表路由的name值
3、不管第一种还是第二种方法一旦利用$destory销毁当前组件，则该组件将不被缓冲
以上两种用法根据不同需求进行选择，利用第二种方式一定要注意路由入口唯一问题，还有就是第二种方式更合适和vuex配合
以下是自己在项目中的做法，由于当时搭建的适合用了两个<router-view></router-view>，所以放弃了第二种方法，但是属于多层跳转
A表示类别页面
B表示详情页面
C表示详情拓展页面
需求：A进入B(不缓冲)，B进入C(不缓冲)，C进入B(有修改不缓冲，反之修改)，B进入A(有修改不缓冲（此处的修改可能发生在C里面），反之修改)
A组件代码：
beforeRouteEnter(to, from, next){ to.meta.keepAlive = true; next(vm => { if (from.path.indexOf("projectDetail") < 0 && from.path != "/" && from.path != "/login") { //自己逻辑代码 vm.status = 0; vm.getProjectList(); } if (from.path.indexOf("projectDetail") > -1 && sessionStorage.getItem("reload") == "true") { //自己逻辑代码 vm.status = 0; vm.getProjectList(); } }) }
此处判断 ‘/’ 防止在当前页面刷新，判断 ‘/login’防止当登陆接口调用两次
判断 sessionStorage.getItem("reload") 记录一个全局状态，判断B进入A(有修改不缓冲（此处的修改可能发生在C里面），反之修改)
B组件代码：
beforeRouteEnter(to, from, next){ to.meta.keepAlive = true; next(vm => { if (from.path.indexOf("projectList") > -1 || from.path == "/") { //自己逻辑代码 vm.status = 1; vm.catalogIndex = "0-0"; vm.getProjectDetail(); } //这里把页面初始值重新赋值，以刷新页面（C进入B） //状态C里面记录 if(vm.$route.meta.isBuffer){ //自己逻辑代码 sessionStorage.setItem("reload", true); //刷新项目列表 vm.$route.meta.isBuffer = false; //恢复初始值 vm.status = 1; vm.catalogIndex = "0-0"; vm.getProjectDetail(); } }) }
此处判断 ‘/’ 防止在当前页面刷新，判断 ‘/login’防止当登陆接口调用两次
C组件代码：
beforeRouteLeave (to, from, next) { if (to.path.indexOf("projectDetail") > -1 && to.query.id && this.isBuffer) { //自己逻辑代码 to.meta.keepAlive = false; to.meta.isBuffer = true; } next() }
this.isBuffer表示修改状态默认false，有修改则改为true，用于刷新B组件
以上仅共参考，可能有不对的地方，希望指出
标签：全局 实例 默认 from 状态 code -- route 类别
原文地址：https://www.cnblogs.com/little-baby/p/14268897.html
