广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/130055.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue路由this.route.push跳转页面不刷新的解决方案
    Vue路由this.route.push跳转页面不刷新 一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。 也就是vue生命周期函数没有执行(c...
    99+
    2022-11-12
  • Vue路由this.route.push跳转页面不刷新怎么解决
    今天小编给大家分享一下Vue路由this.route.push跳转页面不刷新怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文...
    99+
    2022-10-19
  • 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+
    2022-11-12
  • 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+
    2022-10-19
  • 如何解决angular2中router路由跳转navigate的使用与刷新页面问题
    这篇文章主要介绍如何解决angular2中router路由跳转navigate的使用与刷新页面问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、router.navigate的使...
    99+
    2022-10-19
  • uniapp页面带参数跳转不刷新怎么解决
    在使用uniapp开发项目时,我们经常会遇到需要传递参数并跳转下一个页面的场景。然而,在遇到需要刷新页面的情况时,一些开发者却发现页面并没有按照预期的进行刷新。这个问题出现的原因在于uniapp的页面跳转机制,以及页面的组件更新机制。针对这...
    99+
    2023-05-14
  • 如何解决刷新页面vuex数据不消失和不跳转页面的问题
    小编给大家分享一下如何解决刷新页面vuex数据不消失和不跳转页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先说点什么v...
    99+
    2022-10-19
  • vue设置路由title,但刷新页面时title失效的解决
    目录1. 在router/index.js中2.在main.js中设置路由守卫具体操作如下同上在 router/index.js 中在项目的根目录下在main.js中引入并且使用该插...
    99+
    2022-11-13
  • apache和nginx下vue页面刷新404的解决方案
    目录问题描述原因伪静态配置apache伪静态配置nginx伪静态配置总结问题描述 记录一个新手很容易遇见的问题,vue的项目,在打包前本地cli模式运行没有任何问题,但是打包完在ap...
    99+
    2022-12-09
    apache nginx vue页面刷新404 nginx vue页面刷新
  • vue返回上一页面时不刷新问题及解决方案
    目录返回上一页面时不刷新前景思路说明页面回退后,不刷新问题问题描述问题解决返回上一页面时不刷新 前景 在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这...
    99+
    2022-11-13
  • vue路由跳转了但界面不显示的问题及解决
    目录路由跳转了但界面不显示路由明明配置好了页面还是不显示路由跳转了但界面不显示 没有在父路由加上router-view,加上下面的代码即可。 <!-- 路由匹配到的组件将显示在...
    99+
    2022-11-13
  • Vue动态路由路径重复及刷新丢失页面问题的解决
    目录Vue动态路由路径重复及刷新丢失页面1.使用router.addRoutes(teacherRouter);2.问题3.问题Vue路由动态添加重复警告重复总结Vue动态路由路径重...
    99+
    2023-01-14
    Vue动态路由路径重复 Vue刷新丢失页面 Vue动态路由
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作