背景

在很多项目中，实现修改、删除某项数据成功后，需要自动刷新。

但是像go()或者reload()等函数，确实可以实现刷新，但是这种刷新是刷新浏览器，页面会出现空白，然后重新渲染数据，用户体验不是很好。

在Vue项目中，可以利用vue-router重新路由，但是重新路由前和重新路由后，这两个路由是相同的话，页面是不会进行刷新的。

解决

既然重新路由前后两个路由相同的话，页面不会刷新，那我们可以先路由到一个中介页面，然后再路由到需要刷新的页面。相当于，要想刷新页面一，先从页面一跳转到页面二，然后再从页面二跳转到页面一。

情况一

普通的路由，如，/home/mentaltest/list，刷新时，调用shallowRefresh()函数。

_g.shallowRefresh(this.$route.name)

shallowRefresh(name) {
	router.replace({ path: '/refresh', query: { name: name }})
},

传入当前要刷新的页面的name值，页面跳转到中介页面refresh.vue。

refresh页面代码如下

<template>
	<div></div>
</template>
<script>
export default {
  created() {
    console.log(this.$route)
    if (this.$route.query.query && this.$route.query.name) {
      router.replace({name: this.$route.query.name, query: this.$route.query.query})
    } else if (this.$route.query.name) {
      router.replace({ name: this.$route.query.name })
    } else {
      console.log('refresh fail')
    }
  }
}
</script>

由于我在调用shallowRefresh()函数只传入了

this.$route.name

，所以在replace页面跳转到refresh时，query里只有name有值，（即

this.$route.query.name

不为空，而

this.$route.query.query

为空），所以第一个if为false，执行第二个if判断。这时，replace页面跳转到name为

this.$route.query.name

的页面。

情况二

如果需要刷新的页面带有query值，如/home/mentaltest/eidt?id=38，刷新时，调用shallowRefresh_()函数。

这时，函数里的参数，不仅需要把路由name传过去，还需要把路由的query值传过去（即id=38）。

_g.shallowRefresh_({name: this.$route.name, query: this.$route.query})

shallowRefresh_(query) {
	router.replace({ path: '/refresh', query: query})
},

此时，shallowRefresh_()函数里的参数query传入的是一个对象，里面放

$route.name

和

$route.query

，在replace页面跳转到refresh时，携带着

this.$route.name

和

this.$route.query

数据。在refresh页面时，满足第一个if判断，这时，replace页面跳转到name为

this.$route.query.name

的页面，且其query值为

this.$route.query.query

。

彩蛋

params和query的区别，params是针对

this.$router.name

的，如果使用params传参，那配路由文件时，name不要忘了/:id

像

this.$router.push

和

this.$router.replace

这些函数，参数都是一个对象，可以通过路由的name进行跳转，也可以通过路由的path进行跳转。

this.$router.push({name:'Index',params:{id:'123'}})
this.$router.push({name:'Index',query:{id:'123'}})
this.$router.push({path:'/home/index',query:{id:'123'}})

第一种情况，路由会是

/home/index/123

，第二、三种情况，路由会是

/home/index?id=123


不过，push和replace的不同之处就是，push就好像是把新的一个路由压入一个栈里，可以通过go(-1)回到上一个页面；而replace则是新的一个路由替换掉了上一个路由，不能通过go(-1)回到上一个页面。