vue路由跳转刷新页面

vue-router默认是由跳SPA模式，路由切换只是转刷组件替换，页面不会真正刷新。新页但有些场景你必须刷新——比如用户退出登录后清空内存数据，由跳或者某个第三方插件初始化依赖window.onload。转刷

我见过最粗暴的新页写法是 window.location.reload()，这等于把整个应用重新加载一遍，由跳白屏闪烁、转刷状态丢失，新页路由还回到初始路径。由跳要是转刷你的项目用了vuex，刷新后store里的新页数据全没了，用户刚填的由跳表单直接归零。这种体验，转刷用户不骂你才怪。新页

真正可控的刷新方式是先跳转到一个空白页，再立刻跳回来。原理很简单：路由变了组件就销毁，再跳回来时重新创建，相当于手动触发了一次生命周期。

具体怎么搞？先定义一个空路由，比如路径/redirect，组件里什么都不放，只写一个空的<template></template>。然后在需要刷新的地方这样调用：

this.$router.replace({  path: '/redirect', query: {  redirect: this.$route.fullPath } }).then(() => {  this.$router.replace(this.$route.query.redirect) })

注意用replace而不是push，否则浏览器历史记录里会多出一条无意义的中间页，用户按返回键会卡在空白页上，那感觉就像吃苹果咬到半条虫。

还有一种更干净的做法，利用vue的v-if强制重建组件。在父组件里给子组件加个开关：

<template> <child-component v-if="isShow" /> </template> <script> export default {  data() {  return {  isShow: true } }, methods: {  refresh() {  this.isShow = false this.$nextTick(() => {  this.isShow = true }) } } } </script>

这个办法比跳空白页更轻量，因为不需要额外路由配置。但有个坑：如果子组件里用了keep-alive，v-if销毁后重新创建会重新走activated钩子，但deactivated不会触发，你得自己判断初始化逻辑放在哪个生命周期里。

我自己做后台管理系统时遇到过更刁钻的情况——用户停留在某个详情页，点侧边栏同一个菜单，路由参数没变，beforeRouteUpdate不触发，页面数据不刷新。这时候光靠路由跳转没用，因为vue-router默认不监听同一路由的重复跳转。我的解法是监听$route的query变化，在watch里手动拉数据：

watch: {  '$route.query'(newVal, oldVal) {  if (newVal.id !== oldVal.id) this.fetchData() } }

说到底，刷新页面这件事没有银弹。跳空白页通用但稍重，v-if轻快但受缓存限制，watch监听最精准但需要你理解数据流。别一上来就reload()，那是最懒也最伤用户体验的做法。根据场景选方案，比记住某个固定写法重要得多。

很赞哦!（6）