Javascript 如何进行转换‘；出现’；在第二个载荷而不是初始载荷下工作

在我的网站上，我有多个组件作为每个页面的模板，例如“主页”、“关于我”等。我的目标是在每个页面之间进行滑动转换，我使用转换标签以及添加的“出现”属性和一些CSS实现了这一点。我的问题是，我不希望转换发生在我的网站的第一次加载，无论你先去哪一页。为了测试的目的，我在下面添加了一些示例代码来说明我的问题

main.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './Home'
import Foo from './Foo'

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

App.vue：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/foo">Foo</router-link>
    <router-view></router-view>
  </div>
</template>

家
福

Home.vue（包括CSS）：

家
导出默认值{
姓名：“家”
}
主要{
位置：绝对位置；
宽度：100%；
}
.主幻灯片淡入激活状态，.主幻灯片淡入保持激活状态{
过渡：全部。8秒轻松；
}
.主幻灯片淡入，.主幻灯片淡入保持活动状态{
不透明度：0；
}
.主幻灯片淡入{
转化：translateX（-100%）；
}
.主幻灯片淡入淡出激活状态{
转化：translateX（-100%）；
}

Foo.vue（还包括CSS）：

福
导出默认值{
姓名：“富”
}
主要{
位置：绝对位置；
宽度：100%；
}
.foo幻灯片淡入激活状态，.foo幻灯片淡入保持激活状态{
过渡：全部。8秒轻松；
}
.foo幻灯片淡入，.foo幻灯片淡入保持活动状态{
不透明度：0；
}
.foo幻灯片淡入淡入{
转化：translateX（100%）；
}
.foo幻灯片淡入淡出保持活动状态{
转化：translateX（100%）；
}

使用提供的测试代码，您将看到当您在初始加载时转到“/”或“/foo”时，内容将从侧面滑入。我想知道如何使你最初登陆的任何页面都不会发生转换，但是当你转到另一个页面时，转换会在你在站点的剩余时间内发生。这是否可以使用转换标记

---

谢谢

第一次访问时，您应该在浏览器内存中保存您正在访问的事实。只有当您可以从内存中读取时，才应添加转换

---

例如，您可以使用cookie，将其保存到localStorage或indexedDB

也许可以使用Vuex或sessionStorage设置一个变量，并使用它有条件地显示转换。嗨，这是我一直遵循的路线，但我更好奇的是，是否有一种方法可以完全使用Vue来代替。我会记下这是正确的答案，因为这种方式是我使用+的方式，效果很好。谢谢你的帮助！

<template>
    <transition name="home-slide-fade" mode="out-in" appear>
        <main>
            <div>Home</div>
        </main>
    </transition>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style lang="scss" scoped>
    main {
        position: absolute;
        width: 100%;
    }
    .home-slide-fade-enter-active, .home-slide-fade-leave-active {
        transition: all .8s ease;
    }
    .home-slide-fade-enter, .home-slide-fade-leave-active {
        opacity: 0;
    }
    .home-slide-fade-enter {
        transform: translateX(-100%);
    }
    .home-slide-fade-leave-active {
        transform: translateX(-100%);
    }
</style>

<template>
    <transition name="foo-slide-fade" mode="out-in" appear>
        <main>
            <div>Foo</div>
        </main>
    </transition>
</template>

<script>
    export default {
        name: "Foo"
    }
</script>

<style lang="scss" scoped>
    main {
        position: absolute;
        width: 100%;
    }
    .foo-slide-fade-enter-active, .foo-slide-fade-leave-active {
        transition: all .8s ease;
    }
    .foo-slide-fade-enter, .foo-slide-fade-leave-active {
        opacity: 0;
    }
    .foo-slide-fade-enter {
        transform: translateX(100%);
    }
    .foo-slide-fade-leave-active {
        transform: translateX(100%);
    }
</style>