因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据。

解决方法:watch监听路由是否变化。

watch: {
// 方法1
'$route' (to, from ) {
//监听路由是否变化
if(this .$route. params .articleId){
// 判断条件1 判断传递值的变化
//获取文章数据
}
}
//方法2
'$route' (to, from ) {
if(to.path == "/page" ) {
/// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this .message = this.$route.query.msg
}
}
}

喜欢的小伙伴可以关注我的微信公众“前端伪大叔”

vue中params-解决换路由不刷新问题的更多相关文章

  1. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. vue中router跳转本页刷新

    问题:  导航栏的地址发生改变但是页面却不刷新  (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.);           2.location.reload()       ...

  3. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  4. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  5. vue中v-cloak解决刷新或者加载出现闪烁(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  6. 【Vue中的坑】路由相同参数不同无法触发路由

    场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...

  7. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  8. 064——VUE中vue-router之使用路由别名定制(alias)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue中的组件及路由使用

    1.组件是什么        组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声 ...

随机推荐

  1. 如何配置git send-email相关的邮箱信息?

    关键是配置smtpserver,请参考此处

  2. LC 740. Delete and Earn

    Given an array nums of integers, you can perform operations on the array. In each operation, you pic ...

  3. Java日志体系(五)logback

    1.1 简介 师出同门,与log4j一样,logback也是由Ceki Gülcü开发的开源日志组件,可以说是log4j的改进版:在现如今的项目中,logback的出现次数越来越多,是目前主流首选的日 ...

  4. react-native-scrollable-tab-view第一次加载下划线不显示解决

    今天在使用react-native-scrollable-tab-view的时候出现下划线第一次显示的时候不显示,需要点击切换才可以显示. 通过各种实践发现是0.6.7版本问题. 解决实现: reac ...

  5. .Netcore 2.0 Ocelot Api网关教程(4)- 服务发现

    本文介绍Ocelot中的服务发现(Service Discovery),Ocelot允许指定一个服务发现提供器,之后将从中寻找下游服务的host和port来进行请求路由.关于服务发现的详细介绍请点击. ...

  6. Cassandra的架构

    第5章 Cassandra 的架构 5.1 system keyspace Cassandra有一个称为system的内部keyspace,用于存储关于集群的元数据.包括:节点令牌,集群名,用于支持动 ...

  7. Kettle作业的自带定时任务

    文章出处:https://blog.csdn.net/jianlong727/article/details/53966286 7.1.新建作业 7.2.部署作业 在“核心对象”中拖拽两个图标到执行区 ...

  8. 【VS开发】EasySize使用设置CFormView空间自适应view窗口大小

    1.在stdafx.h中引用EasySize.h头文件(同时将EasySize.h放到你的程序目录中) 2.在类定义中添加DECLARE_EASYSIZE [cpp] view plain copy ...

  9. tp5 ThinkPHP5 自定义异常处理类

    在项目的开发过程中异常抛出尤为重要不仅能够做出友好提示帮助掩盖我们伟大的程序员们尴尬的瞬间,还能做到提示开发人员代码白编写的错误,下面进行自定义异常抛出类,纯属个人理解,希望大家指正 首先在框架中我们 ...

  10. day38 各种队列、Event事件、协程、猴子补丁

    1.各种队列 我们已经学习了队列这种存取值的方法,我们以前使用的队列是可以进行进程间通信的(IPC),但是今天学习的这两种队列是不能进行进程间通信的,只能进行线程间的通信 这两种队列分别是先进后出式队 ...