返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue路由this.route.push跳转页面不刷新的解决方案
  • 414
分享到

Vue路由this.route.push跳转页面不刷新的解决方案

2024-04-02 19:04:59 414人浏览 八月长安
摘要

Vue路由this.route.push跳转页面不刷新 一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。 也就是vue生命周期函数没有执行(c

Vue路由this.route.push跳转页面不刷新

一、背景

介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。

也就是vue生命周期函数没有执行(created、mounted钩子函数)。

案例:

A页面:

B页面:

问题:

当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行。

二、解决方法:

1、使用activated:{}周期函数代替mounted:{}函数即可。

2、监听路由


// 不推荐、用户体验不好
watch: {
	'$route' (to, from) {
    // 路由发生变化页面刷新
	this.$router.Go(0);
		}
},

// 该方法会多一次请求
watch: {
	'$route' (to, from) {
    // 在mounted函数执行的方法,放到该处
	this.qBankId = globalVariable.questionBankId;
	this.qBankName = globalVariable.questionBankTitle;
	this.searchCharpter();
	}
},

Vue this.$router.push路由跳转,刷新参数消失


this.$router.push({name:"",params:{id:""}})

name和params搭配刷新参数会消失


this.$router.push({path:"",query:{id:""}})

path和query搭配,刷新页面参数不会消失,query中参数成了url中的一部分

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue路由this.route.push跳转页面不刷新的解决方案

本文链接: https://lsjlt.com/news/130055.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue路由this.route.push跳转页面不刷新的解决方案
    Vue路由this.route.push跳转页面不刷新 一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。 也就是vue生命周期函数没有执行(c...
    99+
    2024-04-02
  • Vue路由this.route.push跳转页面不刷新怎么解决
    今天小编给大家分享一下Vue路由this.route.push跳转页面不刷新怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文...
    99+
    2024-04-02
  • Vue路由this.route.push跳转页面不刷新怎么办
    本篇内容主要讲解“Vue路由this.route.push跳转页面不刷新怎么办”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue路由this.route.push跳转页面不刷新怎么办”吧!Vu...
    99+
    2023-07-04
  • 如何解决Vue路由this.route.push跳转页面不刷新的问题
    这篇文章主要讲解了“如何解决Vue路由this.route.push跳转页面不刷新的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Vue路由this.route.push跳转页面...
    99+
    2023-06-20
  • react 跳转后路由变了页面没刷新的解决方案
    目录问题解决方案问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码...
    99+
    2024-04-02
  • react跳转后路由变了页面没刷新的解决
    目录问题解决方案总结问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码...
    99+
    2023-03-11
    react跳转 react路由变 react页面没刷新
  • react路由跳转不刷新如何解决
    这篇文章主要介绍了react路由跳转不刷新如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react路由跳转不刷新如何解决文章都会有所收获,下面我们一起来看看吧。react路由跳转不刷新的解决办法:1、在...
    99+
    2023-07-05
  • react跳转后路由变了页面没刷新如何解决
    这篇文章主要介绍“react跳转后路由变了页面没刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react跳转后路由变了页面没刷新如何解决”文章能帮助大家解决问题。问题这样的问题貌似原因还...
    99+
    2023-07-05
  • react路由页面不刷新如何解决
    这篇文章主要介绍“react路由页面不刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react路由页面不刷新如何解决”文章能帮助大家解决问题。react路由页面不刷新的解决办法:1、在“...
    99+
    2023-07-04
  • Vue路由跳转传参或打开新页面跳转问题怎么解决
    这篇文章主要介绍了Vue路由跳转传参或打开新页面跳转问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue路由跳转传参或打开新页面跳转问题怎么解决文章都会有所收获,下面我们一起来看看吧。Vue路由跳转...
    99+
    2023-07-05
  • vue项目中路由跳转页面不变问题及解决
    目录vue中路由跳转页面不变问题解决方法路由跳转页面不刷新、this.$router.go(-1)不生效解决思路vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现...
    99+
    2022-11-13
    vue路由跳转 路由跳转页面不变 vue项目路由跳转
  • 如何解决vue路由变化页面数据不刷新的问题
    这篇文章给大家分享的是有关如何解决vue路由变化页面数据不刷新的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我...
    99+
    2024-04-02
  • Vue路由跳转传参或者打开新页面跳转问题
    目录Vue路由跳转传参或打开新页面跳转1. 通过路由中的name属性 2. 通过路由属性中的path属性 3. $router 和 $route的区别4. 在Vu...
    99+
    2023-03-11
    Vue路由跳转传参 Vue路由跳转 Vue打开新页面跳转
  • 如何解决angular2中router路由跳转navigate的使用与刷新页面问题
    这篇文章主要介绍如何解决angular2中router路由跳转navigate的使用与刷新页面问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、router.navigate的使...
    99+
    2024-04-02
  • uniapp页面带参数跳转不刷新怎么解决
    在使用uniapp开发项目时,我们经常会遇到需要传递参数并跳转下一个页面的场景。然而,在遇到需要刷新页面的情况时,一些开发者却发现页面并没有按照预期的进行刷新。这个问题出现的原因在于uniapp的页面跳转机制,以及页面的组件更新机制。针对这...
    99+
    2023-05-14
  • vue设置路由title,但刷新页面时title失效的解决
    目录1. 在router/index.js中2.在main.js中设置路由守卫具体操作如下同上在 router/index.js 中在项目的根目录下在main.js中引入并且使用该插...
    99+
    2024-04-02
  • react跳转路由页面空白如何解决
    这篇文章主要讲解了“react跳转路由页面空白如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react跳转路由页面空白如何解决”吧!react跳转路由页面空白是因为写法错误,其解决办...
    99+
    2023-07-05
  • apache和nginx下vue页面刷新404的解决方案
    目录问题描述原因伪静态配置apache伪静态配置nginx伪静态配置总结问题描述 记录一个新手很容易遇见的问题,vue的项目,在打包前本地cli模式运行没有任何问题,但是打包完在ap...
    99+
    2022-12-09
    apache nginx vue页面刷新404 nginx vue页面刷新
  • 如何解决刷新页面vuex数据不消失和不跳转页面的问题
    小编给大家分享一下如何解决刷新页面vuex数据不消失和不跳转页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先说点什么v...
    99+
    2024-04-02
  • Vue动态路由路径重复及刷新丢失页面问题的解决
    目录Vue动态路由路径重复及刷新丢失页面1.使用router.addRoutes(teacherRouter);2.问题3.问题Vue路由动态添加重复警告重复总结Vue动态路由路径重...
    99+
    2023-01-14
    Vue动态路由路径重复 Vue刷新丢失页面 Vue动态路由
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作