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 就像我预期的那样。

因此，只要我不刷新，Header 转换就会按预期工作；然而，第二次我在不是 / 的路由上刷新时，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" />

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

Vue Router fullPath lost on web browser refresh

javascript

typescript

vue.js

vue-router