iis建设网站,太原网站建设网格未来,梧州网页设计师招聘,网页宣传方案目录 【1】问题描述【2】问题排查前 - 页面渲染、tag 页签渲染 逻辑梳理页面渲染【借用别人的描述】router-view :keykey /1. 不设置key 属性2. 设置 key 属性值为 $route.path/page/1 /page/2/page?id1 /page?id2, 3. 设置 key 属性值为 $rou… 目录 【1】问题描述【2】问题排查前 - 页面渲染、tag 页签渲染 逻辑梳理页面渲染【借用别人的描述】router-view :keykey /1. 不设置key 属性2. 设置 key 属性值为 $route.path/page/1 /page/2/page?id1 /page?id2, 3. 设置 key 属性值为 $route.fullPath/page/1 /page/2/page?id1 /page?id2 tag 页签渲染 【3】问题排查【4】解决 【1】问题描述 首次打开页面弹框中有数据点击 tag 页签关闭当前页面  {return this.$route.fullPath}}
}
/script1. 不设置key 属性 Vue 会复用相同组件, 即 /page/1 /page/2 或者 /page?id1 /page?id2 这类链接跳转时, 不执行created, mounted之类的钩子, 这时候你需要在路由组件中添加beforeRouteUpdate钩子来执行相关方法拉去数据 相关钩子函数为: beforeRouteUpdate 2. 设置 key 属性值为 $route.path
/page/1 /page/2
由于这两个路由的$route.path不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate created mounted
/page?id1 /page?id2,
由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为: beforeRouteUpdate
3. 设置 key 属性值为 $route.fullPath
/page/1 /page/2
由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate created mounted
/page?id1 /page?id2
由于这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate created mounted
tag 页签渲染 项目中每访问一个页面就将页面路由信息保存在 visitedViews 数据中tag 页签 就是 通过 visitedViews 数据使用 router-link 来渲染从而实现点击 tag 页签 页面路由跳转的效果。 【3】问题排查 上图 紫色框 为 问题描述1 中页面组件 红色框 为 问题描述3 中页面组件经过 问题描述2 后问题描述1 的组件不会被复用因为 router-view :keykey / 有 key 再次进入页面时产生了一个新的页面组件也就是 红色框 【问题排查过程】 仔细排查代码发现 → 问题描述 中页面未展示的 数据获取 是在 beforeRouteEnter 中进行的此时还 未产生新的组件 红色框的组件→ 所以获取到的数据其实 赋值给了旧的不被复用组件 中紫色框的组件 → 导致红色组件加载渲染完毕后 beforeRouteEnter 中获取的数据并未正确展示展示。新旧组件 两个组件其实 展示的页面是一个只不过因为 router-view :keykey / 中 有 key 所以导致当前页面 第一次被关掉 之后在打开的时候 key 中拼接的 时间戳 与第一次打开的组件key中的 时间戳不一致所以回产生一个 新的组件而 不会复用旧组件。 【4】解决 beforeRouteEnter 中获取数据 改为 在 mounted 钩子中获取数据 mounted 是页面渲染完成后调用的钩子也就是新组件此时已加载完毕此时获取数据并进行赋值操作都是在新组件中进行。
