版本：
"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>
I've already tried both types of History in the routes file, as I've read that the HTML5 Browser History mode can cause 404's with things on reload, but I'm not getting a 404 - the page content remains as it did before the reload, but this.$route seems to reset or error out, or something.
Unless I'm doing something wrong, I'm surprised this is a bug in Vue as of now.
uj5u.com熱心網友回復：
我認為問題完全與時間有關。
您condenseHeader最初在App組件beforeMount掛鉤中進行設定。我的猜測是，當這個鉤子在初始頁面加載時觸發時，路由路徑尚未決議。
相反，我會做的是condenseHeader通過使其成為計算屬性來使其具有反應性
computed: {
condenseHeader () {
return this.$route.fullPath !== '/';
}
}
此外，根據Prop Casing (camelCase vs kebab-case)，您的condenseHeader屬性應該是condense-header......
<HeaderComponent :condense-header="condenseHeader" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323696.html
標籤：javascript typescript vue.js vue-router
上一篇：動態視頻尺寸