vue动态路由:路由参数改变,视图不更新问题的解决


Posted in Javascript onNovember 05, 2019

问题描述:

使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下:

vue动态路由:路由参数改变,视图不更新问题的解决

原因分析:

具体原因在vue官方文档:响应路由参数的变化一节中有讲过:

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象

(摘自vue文档)

解决办法:

方法一: watch (监测变化) $route 对象

watch: {
  '$route' (to, from) {
   // 监听路由的变化,做你想做的一些事情...
   // this.init()
  }
},

方法二:使用 vue-router 2.2 中引入的 beforeRouteUpdate 导航守卫:

export default {
 data () {
  return {
   errCode: '',
   info: {}
  }
 },
 beforeRouteUpdate (to, from, next) {
  // 做一些想要做的处理...
  // this.errCode = to.params.code
  // this.info = formatErrorMsg(this.errCode)
  next() // 一定要有next
 },
 // ...
}

方法二中需要注意的是,一定要有next()

以上这篇vue动态路由:路由参数改变,视图不更新问题的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
老生常谈的跨域处理
Jan 11 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
vue 实现路由跳转时更改页面title
Nov 05 #Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 #Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 #Javascript
node.js域名解析实现方法详解
Nov 05 #Javascript
node.js文件操作系统实例详解
Nov 05 #Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 #Javascript
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
php使用google地图应用实例
2014/12/31 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP多进程简单实例小结
2019/11/09 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
javascript每日必学之循环
2016/02/19 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
django中模板的html自动转意方法
2018/05/27 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
如何基于python实现脚本加密
2019/12/28 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
环保倡议书100字
2014/05/15 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
三好学生个人总结
2015/02/15 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python