Vue Router路由不刷新整个页面的解决办法 |
您所在的位置：网站首页 › vue路由跳转参数改变页面不刷新 › Vue Router路由不刷新整个页面的解决办法 |
|
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 本文主要从一个功能点切入描述一种页面刷新路由不改变但只重新加载组件，不要使这个页面重新渲染的解决办法。用到router的方法有replace以及进阶模块导航守卫beforeRouterEnter。 前言首先描述一下功能背景，新增数据是步骤形式的，这种交互还是比较常见的，针对录入信息较多的时候需要分类按步骤录入。举个例子比如人员信息新增时，会涉及一下信息。 基本信息（身份证读卡器读取） 业务信息（根据身份证号查出所在班组、参见单位以及一些需要手动录入的信息） 人脸采集（本地摄像头拍照采集） 步骤模块的开发设计通常是不改变路由的，第一步到最后一步路由始终是,例如：/add 问题需求点描述重点功能来了 当一组数据新增完毕后选择继续新增时，期望当前页面跳转到第一步,使用this.$router.go(0)或者location.reload可以解决，但是会使整个页面重载，会有白屏和等待时间体验不好。 补充：你可能想到v-if或者v-show切换展示组件是不是也可以解决，但是你需要处理多个页面清空操作，步骤式的操作不仅仅是下一步还有上一步操作，前一步输入的信息与后一步有关联，设计考虑上会比较复杂且容易出bug。因此我们还是从路由入手寻找解决办法。 需求总结：仅重新加载组件，不要使整个页面重载。 解决办法解决的办法：使用replace方法走一个中间组件。相当于a到b，b到a。b在beforeRouterEnter时进行处理 b.vue // 用于刷新的中间组件 Component -> Refresh -> Component 场景举例: 步骤式新增成功后的按钮 export default { name: 'Refresh', beforeRouteEnter(to, from, next) { next(vm => { vm.$router.replace(from.path) }) } } 复制代码 一些疑问点为什么使用replace而不使用push? 其实用push也行,就是push会在history也就是浏览器的历史里留下记录，但是用replace就不会，由于这里是一个不需要展示的中间件就不必留下记录了 不使用中间件使用push或者replace能不能跳转到自身呢 经过测试，push自身或者replace自身，页面展示依然停留在完成页，没有回到第一步。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |