Блог

Версии:

 "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"
},
 

Итак, я создавал онлайн-портфолио SPA в Vue3, и я столкнулся с этой проблемой с самого начала. Я использую текущий маршрут, чтобы инициировать переход на моем головном компоненте. На самом деле эта часть не важна.

Всякий раз , когда я перехожу к / , this.$route.fullPath выглядит нормально.

Однако, если я, например , перейду на один из других маршрутов в своем приложении /webdev , а затем обновлю и проверю this.$route.fullPath еще раз, это произойдет / вместо /webdev того, как я ожидал.

Таким образом, пока я не обновляю, переход заголовка работает должным образом; однако, как только я обновляю маршрут , которого нет / , маршрутизатор Vue забывает, где я был, и вместо этого думает, что я нахожусь на базовом пути / .

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.

Я думаю, что вся проблема связана со временем.

Вы condenseHeader изначально устанавливаете в своем App компонентном beforeMount крючке. Я предполагаю, что, когда этот крючок срабатывает при начальной загрузке страницы, путь маршрута не был разрешен.

Что бы я сделал вместо этого, так это сделал condenseHeader реактивным, сделав его вычисляемым свойством

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

Кроме того, в соответствии с корпусом опоры (чехол для верблюда против чехла для шашлыка), ваш condenseHeader атрибут должен быть condense-header …

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