javascript - 如何在路由器 View 转换中添加 Logo ？

Question

在 App.vue 中，我将淡入淡出过渡包裹在 <router-view> 周围。如何将 Logo 添加到更改子页面时显示的白色淡入屏幕？

我的App.vue的简化代码

<template>
    <div id="app">
        <div class="site-content">
            <header></header>
            <transition name="fade" mode="out-in">
                <router-view/>
            </transition>
            <footer></footer>
        </div>
    </div>
</template>

<script>
    /*---*/
</script>

<style>    
    /*---transition---*/
    .fade-enter-active,
    .fade-leave-active {
        transition-duration: 0.3s;
        transition-property: opacity;
        transition-timing-function: ease;  
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }    
</style>

Answer 1

实现此目的的方法之一是为每个“页面”指定一个 position:relative 样式，然后在包含您的 Logo 的页面背面添加图层:

var firstPage = {
    template: `
        <div class="page">
            <router-link :to="{name:'page2'}">page 2</router-link>
        </div>
    `,
}
var secondPage = {
    template: `
        <div class="page">
            <router-link :to="{name:'page1'}">page 1</router-link>
        </div>
    `,
}

var routes = [
  { name: 'page1', path: '/', component: firstPage },
  { name: 'page2', path: '/first', component: secondPage }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

var app = new Vue({
    el: '#app',
    template: "#template",
    router,
})

.app, html, body {
    min-width: 100%;
    min-height: 100%;
    height: 100%;
}


/*---transition---*/
.fade-enter-active,
.fade-leave-active {
    transition-duration: 0.3s;
    transition-property: opacity;
    transition-timing-function: ease;  
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}    



.page {
    position: relative;
    background: white;
    min-width: 100%;
    min-height: 100%;
}
.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
 
 
 

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app"></div>

<template id="template">
    <div class="app">
        <div class="logo">
            TEST LOGO
        </div>
        <transition name="fade" mode="out-in">
            <router-view/>
        </transition>
    </div>
</template>

虽然这看起来像是一堆代码，但其中大部分实际上是设置 vue-router 的样板，因此我可以向您展示示例。

在正常操作期间，页面完全位于顶部，您看不到其下方的 Logo 。然后当您更改页面时，当前页面会淡出，因此位于其下方的 Logo 变得更加明显，然后在加载新页面时 Logo 会再次淡出。