To achieve this effect, one method is to assign each "page" a style of position: relative, and then add a layer behind the pages containing your 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>
Although it may appear daunting with all this code, most of it is actually boilerplate necessary to set up vue-router in order to demonstrate the example.
In normal operation, the page is completely on top, obscuring the logo underneath. However, when you switch between pages, the current page fades out, making the logo more visible since it's positioned beneath, before fading out again as the new page loads.