Wrapping three specific routes with the same component in VueJS

I have three routes, /login, /signup and /forgot and their corresponding components which only contain the basic forms you'd expect. I would like those components to be contained within a landing page component without having to put my landing page logic within my three components because that would reload the container and my transitions wouldn't show.

My landing page has something like this going on

<h1>Welcome to my web app</h1>
<transition name="slide" mode="">
   <router-view></router-view>
<transition>

routes.js looks like this

import SignUp from './components/SignUp';
import SignIn from './components/SignIn';
import Forgot from './components/Forgot';
export const routes = [
    { path: '/signup', component: SignUp },
    { path: '/login', component: SignIn },
    { path: '', component: SignIn },
    { path: '/forgot', component: Forgot }
];

Would I need some intermediary hidden route or something? Or would I only wrap the container based on conditional logic in App.vue (which, to me, doesn't seem like good practice)?

via Mathieu Bertin