动态路由
官网解读 :我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。
即如果你有一个 盘点录入单 路由,但你想通过不同的传不同的 ID 来加载 CheckInputInfo 这个组件,若采用 params 方式,这时只需要在 path 后面配置 /:taskId 即可实现 CheckInputInfo/1 和 CheckInputInfo/2 这样的路由,同时可以通过 this.$route.params.taskId 来获取当前路由的 taskId 。
{ path: 'CheckInputInfo/:taskId', meta: { title: '盘点录入单' }, name: 'CheckInputInfo', component: () => import('@/view/Check/CheckInputInfo.vue') }
类似的,同样也可使用 query 方式,这时只需要在 path 后面配置 :taskId 即可实现 CheckInputInfo"htmlcode">
{ path: 'CheckInputInfo:taskId', meta: { title: '盘点录入单' }, name: 'CheckInputInfo', component: () => import('@/view/Check/CheckInputInfo.vue') }
vue-router 通过配置 params 和 query 来实现动态路由,并可通过 this.$route.xx 来获取当前的 params 或 query ,省去了直接操作或处理 window.location ,还是挺方便的。
注意 :当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
解读:在不使用 keep-alive 的情况下,我们每次加载路由,这时会重新 render 当前路由挂载的 component ,但若这两个路由是同一个路由组件配置的动态路由, vue 为了性能设计了不会重新 render 。
这显然不符合我们的预期,那么该如何在动态路由下拥有完整的生命周期呢?答案是 keep-alive 。
keep-alive
官网解读 :keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发。当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
keep-alive通过缓存Vnode的方式解决了SPA最为关键的性能问题。以下,我就按步骤来分析以下:
一、路由触发路由组件重新render的问题
1、不缓存模式:
<router-view></router-view>

每次切换都会重新 render ,执行整个生命周期,每次切换时,重新 render ,重新请求,,必然不满足需求。
2、缓存模式:
<keep-alive> <router-view></router-view> </keep-alive>
只是在进入当前路由的第一次 render ,来回切换不会重新执行生命周期,且能缓存 router-view 的数据。
二、router-view 数据缓存问题
keep-alive 采用 render 函数来创建 Vnode ,一下是 vue v2.5.10 的 keep-alive.js 的 render() :
render () { const slot = this.$slots.default const vnode: VNode = getFirstComponentChild(slot) const componentOptions: "htmlcode">vnode.componentInstance = cache[key].componentInstance否则,将 Vnode 保存在 cache 里:
cache[key] = vnode于是当时用 keep-alive 时,我们就可以保存每个 route-view 的数据。
动态路由缓存问题及如何实现
一、bug表象
最开始其实是不知道这个 bug 的,也是通过现象反推,然后由源码解决这个问题的,那就先从现象说起:
动态路由缓存的的具体表现在:
由动态路由配置的路由只能缓存一份数据。 keep-alive 动态路由只有第一个会有完整的生命周期,之后的路由只会触发 actived 和 deactivated 这两个钩子。 一旦更改动态路由的某个路由数据,期所有同路由下的动态路由数据都会同步更新。
我们的期望其实是在使用 keep-alive 的情况下,动态路由能有非动态的表现,即拥有 完整的生命周期 、 各自的数据缓存 。
二、发掘问题关键
入手 keep-alive 源码发现,其实问题就出现在这一步:
if ( // not included (include && (!name || !matches(include, name))) || // excluded (exclude && name && matches(exclude, name)) ) { return vnode }通过上面的表象其实可以探究出, router-view 其实是已经缓存了,而且一个动态路由的 router-view 都是通过了 if 判断返回了 Vnode 。那么再看一下这个 name 是什么:
function getComponentName (opts: "htmlcode"><keep-alive :include="cacheList"> <router-view :key="$route.path"></router-view> </keep-alive>然后修改 keep-alive.js 源码,如下(因为放假的关系不详细说了,直接贴源码,实现的人就是我,也是第一个,github上此BUG目前还是open状态):
/* *@flow *modify by LK 20190624 */ import { isRegExp, remove } from 'shared/util' import { getFirstComponentChild } from 'core/vdom/helpers/index' type VNodeCache = { [key: string]: "color: #ff0000">如何集成因为放假赶车的关系,粗略说一下,有问题直接在底下评论:
一、修改package.json:
npm install时不下载 vue ,修改 packjson.js 改为本地的 vue:"vue": "file:./vue2.5.0/"
"dependencies": { "axios": "^0.18.0", "clipboard": "^2.0.0", "codemirror": "^5.38.0", "countup": "^1.8.2", "cropperjs": "^1.2.2", "dayjs": "^1.7.7", "echarts": "^4.0.4", "html2canvas": "^1.0.0-alpha.12", "iview": "^3.2.2", "iview-area": "^1.5.17", "js-cookie": "^2.2.0", "simplemde": "^1.11.2", "sortablejs": "^1.7.0", "tree-table-vue": "^1.1.0", "v-org-tree": "^1.0.6", "vue": "file:./vue2.5.0/", "vue-i18n": "^7.8.0", "vue-router": "^3.0.1", "vuedraggable": "^2.16.0", "vuex": "^3.0.1", "wangeditor": "^3.1.1", "xlsx": "^0.13.3" },二、修改所有本地 import vue 为本地文件:
// import Vue from 'vue' import Vue from '../vue-2.5.10/src/core/index'以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com