在页面A,点击页面A中的某个按钮,携带参数刷新当前页面A。
在当前页面跳转到当前页面,相当于 “重复点击选中的导航” 这一操作,通常都会在 router.js 中设置一下代码,使用 $router.replace()、$router.push() 在同一个页面做刷新跳转动作会没有效果。
//重复点击选中的导航时报错问题
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
return routerPush.call(this, location).catch(error => error);
const routerReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location) {
return routerReplace.call(this, location).catch(error => error);
解决办法:
app.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"/>
</template>
<script>
export default {
name: "app",
provide (){
return {
reload: this.reload
data(){
return {
isRouterAlive: true
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
</script>
要刷新的页面:
this.$router.replace({
path: "/device/history",
query: {"showHelp":2}
},()=>{
that.reload();//刷新页面
前端 - vue路由参数变更刷新当前页面_个人文章 - SegmentFault 思否通过this.$router.replace改变当前页面路由地址(单纯改变页面地址页面是不刷新的)结合this.reload()刷新当前页面https://segmentfault.com/a/1190000021268826?sort=votes
vue项目刷新当前页面的三种方法_Linux小百科的博客-CSDN博客_vue刷新页面本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下。想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上https://blog.csdn.net/yaxuan88521/article/details/123307992
active (newValue) {
let query = this.$router.history.current.query;
let path = this.$router.history.current.path;
//对象的拷贝
let newQuery = JSON.pars
vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue的created或者mounted钩子,所以数据不会重新渲染。
解决办法有两种:
1:监听地址栏变化(watch),这是vue-router官方给出的解决办法。
监听路由变化,把初始化的方法重新写到监听的方法里面执行
2、给router-view加个唯一的key,来保证路由切换时都会重新...
今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的。
我尝试了俩种方式来修改url:
[removed].href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了…,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载。
[removed].hash,url中#为网页中的一个位置,当读取此url时,页面会自动滚
let query = JSON.parse(JSON.stringify(this.$route.query))
query.productModelId = 'abc' //state 修改的参数
this.$router.push({ path: this.$route.path, query })
1.不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name