Vue3+Vue Router4刷新非首页路由fullPath重置为根路径问题求助

问题根因 #

你的问题核心是路由初始化异步性+状态未响应路由变化两个原因共同导致：

1. Vue Router 4 的初始导航是异步执行的，你在 beforeMount 生命周期读取 $route 时，路由还未完成初始路径解析，此时拿到的始终是默认的根路径 /
2. 你把 condenseHeader 定义为响应式数据，仅在初始化和路由离开前手动更新，没有和路由状态做自动绑定，路由解析完成后状态不会同步更新

修复方案 #

1. 优化App.vue状态定义，直接绑定路由响应式状态 #

删掉手动更新 condenseHeader 的相关逻辑，直接将其定义为计算属性，自动响应路由变化：

<script lang="ts">
import { defineComponent } from 'vue';

import HeaderComponent from './components/HeaderComponent.vue';
import FooterComponent from './components/FooterComponent.vue';

export default defineComponent({
  name: 'App',
  components: {
    HeaderComponent,
    FooterComponent,
  },
  computed: {
    condenseHeader() {
      return this.$route.fullPath !== '/';
    },
  },
});
</script>

模板部分完全不需要修改，transition 的相关逻辑不受影响。

2. 调整应用挂载逻辑，等待路由就绪后再挂载 #

修改你的 main.ts 代码，等路由完成初始导航后再挂载根组件，确保首次读取路由时路径就是正确的：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 等待路由初始化完成再挂载应用
router.isReady().then(() => {
  createApp(App).use(router).mount('#app')
})

3. 修正路由配置冗余（可选，建议修改） #

你当前的通配符路由直接渲染Home组件，会导致非法路径访问时地址栏和页面内容不匹配，建议改为重定向到根路径：

// src/router/index.ts 中的通配符路由修改为
{
  path: '/:catchAll(.*)*',
  redirect: '/'
}

如果需要404页面，替换成对应的404组件即可。

内容的提问来源于stack exchange，提问作者Zach Smith