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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
javascript的console.log()用法小结
May 31 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
js实现特别简单的钟表效果
Sep 14 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python 数据的清理行为实例详解
2017/07/12 Python
flask中的wtforms使用方法
2018/07/21 Python
python 接收处理外带的参数方法
2018/12/03 Python
python面试题之列表声明实例分析
2019/07/08 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python气泡提示与标签的实现
2020/04/01 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
请说出以下代码输出什么
2013/08/30 面试题
大学生专科学习生活的自我评价
2013/12/07 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
工作会议通知
2015/04/15 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技