东坑网页设计,东莞seo网络营销策划,企业 网站规划与网页设计word,包装设计appvue中keep-alive组件主要有三个常用的props。 1#xff0c;include存放的name是组件自身的name属性#xff0c;只有名称匹配的组件会被缓存2#xff0c;exclude#xff0c;任何名称匹配的组件都不会被缓存3#xff0c;max#xff0c;最多可以缓存多少组件实例#xff0…vue中keep-alive组件主要有三个常用的props。 1include存放的name是组件自身的name属性只有名称匹配的组件会被缓存2exclude任何名称匹配的组件都不会被缓存3max最多可以缓存多少组件实例一旦达到这个数字那么缓存组件中最近没有被缓存的实例会被销毁 这里使用 include 属性实现动态缓存include 有3种传值方式 ‘组件A的name,组件B的name’‘正则表达式1正则表达式2’‘[组件A的name组件B的name]’ 实际开发过程中一般配合vue-router食用 keep-alive :includealiveRoutes router-view/router-view /keep-alive 思路通过将 aliveRoutes 加入Vuex进行状态管理然后通过actions来动态改变aliveRoutes。具体实现如下 // store/async-router.js state: {...aliveRoutes: [] }, mutations: {UPDATE_ALIVE_ROUER: (state, data) {state.aliveRoutes data}, }, actions: {...addAliveRouter({ commit, state }, routerName) {if (!routerName) returnconst originData state.aliveRoutes || []originData.push(routerName)const arr Array.from(new Set(originData))commit(UPDATE_ALIVE_ROUER, arr)},delAliveRouter({ commit, state }, routerName) {const originData state.aliveRoutes || []const index originData.indexOf(routerName)if (!routerName || index -1) returnoriginData.splice(index, 1)commit(UPDATE_ALIVE_ROUER, originData)}, } // xxx.vue...export default { name: componentA, // 注意name需要与 aliveRoutes 中保持一致beforeRouteLeave(to, from, next) {next()// 判断如果返回首页则移除keepalive 否则保持缓存if (to.path index) {// 移除 aliveRoutes 中的 componentA this.$store.dispatch(delAliveRouter, componentA)}}, created() { // 初始化时增加 componentA 到 aliveRoutes this.$store.dispatch(addAliveRouter, componentA) }, ... } 在初始化路由时可以将路由中需要缓存的组件的name添加到 aliveRoutes  中 import store from /store// 加载默认需要keep alive的路由 allRoutes.forEach(route {const { meta, name } routeif (meta meta.keepAlive) store.dispatch(addAliveRouter, name) })...