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 验证上传图片大小[客户端]
Aug 01 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
用jquery存取照片的具体实现方法
2013/06/30 Javascript
移动节点的jquery代码
2014/01/13 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
JavaScript中三种常见的排序方法
2017/02/24 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Javascript实现关闭广告效果
2021/01/29 Javascript
PyMongo安装使用笔记
2015/04/27 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python直接访问私有属性的简单方法
2016/07/25 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python 图片去噪的方法示例
2019/07/09 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
精彩的推荐信范文
2013/11/26 职场文书
地陪导游欢迎词
2015/01/26 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server