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

Posted 2023-03-13

【中文标题】Vue Router fullPath 在网络浏览器刷新时丢失

【英文标题】：Vue Router fullPath lost on web browser refresh

【发布时间】：2021-12-05 22:32:34

【问题描述】：

版本：

"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 中的一个错误。

【问题讨论】：

@Phil 它一直在我的本地主机和网站本身上发生。所以，本地和生产

您是否遵循文档所说的后备设置？ next.router.vuejs.org/guide/essentials/history-mode.html

@LawrenceCherone 我的路由文件中有一个catchAll 路由。不过，我没有像页面那样的后端 Node/Express 设置。我不知道我正在做的事情需要它。

@Phil 是的，当我在本地运行 repo 时。我没有 Node/Express 服务器代码——只有这个 repo。我不知道需要它。

关于服务器配置，如果你部署到 Netlify，我相信你的 _redirects 文件是 all you need 所以你应该在这方面做得很好

【参考方案1】：

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

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

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

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

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

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

【讨论】：

哇。我真的认为它做到了。啊啊啊啊。我从没想过这可能是时间问题。非常感谢你，菲尔。问题 - 计算属性或手表属性在这里会更好吗？我不是在做计算或转换，而是在看一个特定的值。此外，在 kebab-case 评论中适当注明。我将返回并更改我的 repo 中的所有 attrs。

我认为普遍的共识是更喜欢计算属性而不是观察者（至少在 Vue 2 中是这样）。无论如何，如果您想在模板中使用比较的结果，我认为这是计算的完美用例

明白了。那么，我将为此使用计算属性。问题解决了。再次感谢！