npm install vue-router-cache --save 初始化的配置 importrouterfrom'./router'importVueRouterCachefrom'vue-router-cache'Vue.use(VueRouterCache,{router:router,max:10,// 多例模式isSingleMode:false,isDebugger:true,directionKey:'direction',getHistoryStack(){conststr=window.sessionStorage.getItem('history...
支持嵌套路由 (嵌套路由请在最里层的router-view包裹router-cache,外层的router-view不要包裹router-cache) 在线案例 Base demo Demo address 安装 npm install vue-router-cache --save 初始化的配置 importrouterfrom'./router'importVueRouterCachefrom'vue-router-cache'Vue.use(VueRouterCache,{router:router,max...
vue-router-cache做了几件小事情 提供浏览器路由方向(forward、back、replace) 在知道路由是forward、back、replace的基础上,浏览器进入新页面缓存新页面,浏览器触发后退(back)时自动删除离开页面缓存,从而实现前进刷新后退缓存 提供管理缓存的api方法,这些方法的参数和vue-router的push方法的参数一致,这样做保证了代码的...
keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载。 它的原理是在created函数调用时将需要缓存的vnode节点保存在this.cache当中,如果符合条件则从cache取出vnode实例进行渲染。 主要是有以下三个属性 include:需要缓存的数据,支持字符串,数组,正则 exclude:不需要缓存的数据,支持字符串,数组,正则 max:缓...
-- 组件 keep-previous-alive 代码 --><template><keep-alive><slot/></keep-alive></template>letrouterHistory=[];functionremove(arr,item){if(arr.length){constindex=arr.indexOf(item);if(index>-1){returnarr.splice(index,1);}}}// 清除 keep-alive 中的缓存functionpruneCacheEntry(cache,key...
extend(cache[name], { route, configProps }) fillPropsinData(component, data, route, configProps) } return h(component, data, children) } } 给view组件添加routerView字段,说明当前组件是view,再根据routerView向父级寻找,判断当前view的层级,根据depth与matched获取要渲染的组件...
动态设置方法 1.重构 importCpnfrom'xxx'...name:CacheRouterName component:{...Cpn,name:CacheRouterName}... 2.异步加载 ...name:CacheRouterName,component:async()=>{let cpn=awaitimport('xxxx/index.vue');cpn.default.name=CacheRouterName;returncpn;}... ...
cache[name] = null return h() } // 获取到渲染的组件 const component = cache[name] = matched.components[name] // registerRouteInstance会在beforeCreated中调用,又全局的Vue.mixin实现 // 在matched.instances上注册组件的实例, 这会帮助我们修正confirmTransition中执行路由守卫中内部的this的指向 ...
meta: { cache: false } // 标记不需要缓存的路由 } ] } ]; 2. 使用路由元信息(meta)来管理缓存 通过在路由配置中添加 `meta` 字段,您可以为路由添加一些自定义信息。在这种情况下,您可以添加一个 `cache` 字段来标记路由是否需要缓存。 3. 利用路由导航守卫 您可以使用 `beforeRouteLeave` 导航守卫,在...
使用路由懒加载,首次加载app.js体积明显减小。路由跳转会再次发送请求,size为prefetch cache 把组件按组分块 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中, 一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4) const Foo = () => import(/* webpackChunkName: "group-foo"...