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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
vue3.0 上手体验
2020/09/21 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
小学清明节活动方案
2014/03/08 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
大班上学期个人总结
2015/02/13 职场文书
研究生导师推荐信
2015/03/25 职场文书