Vue Router fullPath 在网络浏览器刷新时丢失

Question

版本：

"dependencies": {
  "@types/node": "^16.7.4",
  "core-js": "^3.6.5",
  "vue": "^3.0.0",
  "vue-class-component": "^8.0.0-0",
  "vue-router": "^4.0.0-0",
  "vuex": "^4.0.0-0"
},

所以我一直在 Vue3 中构建一个 SPA 在线产品组合，从一开始我就面临这个问题。我使用当前路由来触发我的 HeaderComponent 上的转换。那部分并不重要，真的。

每当我导航到/ 时，this.$route.fullPath 看起来都很正常。

但是，如果我转到我的应用程序上的其他路线之一，例如/webdev，然后我刷新并再次检查this.$route.fullPath，它有/ 而不是/webdev，就像我预期的那样会的。

所以，只要我不刷新，标题转换就会按预期工作；但是，当我在不是 / 的路由上刷新时，Vue Router 会忘记我在哪里，而是认为我在基本路径 /。

src/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import WebDev from '../views/WebDev.vue';
import SoundDesign from '../views/SoundDesign.vue';

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/webdev',
      name: 'Web Dev',
      component: WebDev,
    },
    {
      path: '/sounddesign',
      name: 'Sound Design',
      component: SoundDesign,
    },
    {
      path: '/:catchAll(.*)*',
      name: 'Home',
      component: Home,
    }
  ],
});

src/App.vue

<template>
<div class="page-container">
  <div class="content">
    <HeaderComponent :condenseHeader="condenseHeader"></HeaderComponent>
    <main>
      <router-view v-slot="{ Component }">
        <transition
          name="fade"
          mode="out-in"
          @before-leave="beforeLeave"
          appear
        >
          <component :is="Component"></component>
        </transition>
      </router-view>
    </main>
  </div>
  <FooterComponent></FooterComponent>
</div>
</template>

<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,
  },
  data: () => ({
    condenseHeader: false,
  }),
  beforeMount() {
    this.setCondenseHeader();
  },
  methods: {
    beforeLeave() {
      this.setCondenseHeader();
    },
    setCondenseHeader() {
      this.condenseHeader = this.pathNotHome;
    },
  },
  computed: {
    pathNotHome() {
      return this.$route.fullPath !== '/';
    },
  },
});
</script>

我已经在路由文件中尝试了这两种类型的历史，因为我已经读到 HTML5 浏览器历史模式可能会导致 404 重新加载，但我没有得到 404 - 页面内容保持为它在重新加载之前完成了，但this.$route 似乎重置或出错了，或者其他什么。

除非我做错了什么，否则我很惊讶到目前为止这是 Vue 中的一个错误。

Answer 1

我认为问题完全与时间有关。

您最初是在 App 组件 beforeMount 挂钩中设置 condenseHeader。我的猜测是，当这个钩子在初始页面加载时触发时，路由路径还没有被解析。

我会做的是通过将 condenseHeader 设为计算属性来使其具有反应性

computed: {
  condenseHeader () {
    return this.$route.fullPath !== '/';
  }
}

另外，根据Prop Casing (camelCase vs kebab-case)，您的condenseHeader 属性应该是condense-header...

<HeaderComponent :condense-header="condenseHeader" />