针对Vue相同路由不同参数的刷新问题
在使用vue和vue-router开发spa应用时,我们会遇到这样一种问题。
当页面跳转时,组件本身并没有发生改变:
// 路由映射关系'/form/:type'
// 当前页面路由/form/shop1
this.$router.push({ name: 'form', params: { type: 'shop2' })
这时我们进行路由跳转后会发现组件并没有刷新,在前一个路由组件的数据都保留了下来,这并不是我们想要的效果。
对于简单的数据更新,我们可以直接监听路由参数并重新获取路由的初始化数据即可,
但是对于有很多子组件需要初始化或者reset的情况,我们还是有必要重新执行组件的生命周期。
针对这种情况可以使用三种方式解决:
1.为相同路由页面的跳转进行中间路由替换,在router上注册beforeEach全局守卫进行拦截,跳转到一个中间路由(例如empty),再从中间过渡路由跳转至要去的路由。
// 全局导航守卫
router.beforeEach((to, from, next) => {
if (to.name === from.name && to.params.type !== from.params.type) {
next({ name: 'empty', query: { toPath: to.fullPath } })
} else {
next()
}
})
// 中间过渡路由
let toPath = this.$route.query.toPath
if (this.toPath) {
this.$router.push({ path: this.toPath })
}
2.使用v-if重新渲染当前页面组件
// html部分
<div>
<router-view v-if="showRouterView"/>
</div>
// script部分
export default {
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.showRouterView = false
this.$nextTick(() => (this.showRouterView = true))
}
}
}
这样把方法注册到跟组件上,对于想刷新的组件直接调用reload方法即可。
3.使用vue文档组件绑定的key值来进行强制刷新
vue文档说明了当你需要
- 完整地触发组件的生命周期钩子
- 触发过渡
的时候可以利用更新组件绑定的key值来完成更详细的说明
这样直接为组件绑定与路由参数关联的值即可
<MyComponent :key="routeParams" />
综合来看,第三种方式最简单,推荐使用。
来源:https://segmentfault.com/a/1190000016561397
针对Vue相同路由不同参数的刷新问题的更多相关文章
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- vue的路由带参数和取参数,watch路由监听
1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...
- Vue跳转相同路由不同参数,解决页面数据不自动刷新
参考: https://www.cnblogs.com/ainyi/p/9340311.html https://blog.csdn.net/weixin_41888813/article/detai ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数
一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候 表名小写_set.all()不知是哪个字段 ...
随机推荐
- 百分号编码(URL编码)
百分号编码又叫做URL编码,是一种编码机制,只要用于URI(包含URL和URN)编码中. URL中那些字符需要编码,又为什么进行编码 一.URL是什么? URL(Uniform Resource L ...
- html body标签 语法
html body标签 语法 标签body是什么意思? 标签body是一个网页的身体部分,也就是用于定义网页的主体内容,也是一个HTML文档中必须的部分. 作用:定义文档的主体. 广州大理石机械构件 ...
- 策略模式------《Head First 设计模式》
第一章---策略模式 xzmxddx 学习方式:书籍<Head First 设计模式>,这本书通俗易懂,所有知识点全部取自本书. 面向对象设计原则 封装变化 多用组合,少用继承 针对接口编 ...
- 3D Computer Grapihcs Using OpenGL - 16 使用DrawElementsInstanced绘制立方体
我们使用15节学到的知识来绘制14节的立方体. 在第14节我们使用了两次glDrawElements实现了OpenGL实例化,发现这样仍然不太方便,如果需要绘制成千上万的立方体,就需要手写成千上万次的 ...
- 探究代码审查(Code review)
Code review 是什么 对软件源代码的系统性检查,查找软件源代码质量,结构,漏洞等问题. PS:Code review ≍ Code inspections ≥ Code walkthrou ...
- spring cloud:gateway-eureka
gateway-server-eureka 1. File-->new spring starter project 2.add dependency <dependency> &l ...
- 【机器学习速成宝典】模型篇02线性回归【LR】(Python版)
目录 什么是线性回归 最小二乘法 一元线性回归 多元线性回归 什么是规范化 Python代码(sklearn库) 什么是线性回归(Linear regression) 引例 假设某地区租房价格只与房屋 ...
- LinkedList Stack
- vue模板快速生成
vue模板快速生成 vue 模板 快速生成 每一次都手动敲重复代码的话,是一个很繁琐的事情,通过vscode自带代码片段可以解决我们大部分问题 文件 => 首选项 => 用户代码片段=& ...
- awk命令1
[root@a ~]# awk 'END{print NR}' c.txt #没错,这就是文件的行数,当然,这种统计方法不是linux下最快的,但也是一种思路3[root@a ~]# wc ...