Vue 3 中实现引导页

<template>  
  <transition name="fade">  
    <div v-if="showSplash">  
      <!-- 引导页内容 -->  
      <h1>欢迎来到引导页</h1>  
    </div>  
  </transition>  
</template>  
  
<script>  
import { ref, onMounted } from 'vue';  
  
export default {  
  setup() {  
    const showSplash = ref(true);  
  
    onMounted(() => {  
      setTimeout(() => {  
        showSplash.value = false;  
        // 假设你有一个方法用于导航到首页  
        navigateToHomePage();  
      }, 5000);  
    });  
  
    const navigateToHomePage = () => {  
      // 你可以使用router的push方法来导航  
      // 假设你已经设置了Vue Router并且可用  
      router.push('/home');  
    };  
  
    // 注意：你需要从外部引入router实例，或者通过provide/inject或其他方式获取  
    // 这里为了简化，我们假设router已经在上下文中可用  
    // 实际开发中，你可能需要使用provide/inject或在父组件中传入router  
  
    return {  
      showSplash  
    };  
  }  
};  
</script>  
  
<style scoped>  
/* 过渡动画样式 */  
.fade-enter-active, .fade-leave-active {  
  transition: opacity 0.5s;  
}  
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {  
  opacity: 0;  
}  
</style>

<template>  
  <div>  
    <!-- 首页内容 -->  
    <h1>欢迎来到首页</h1>  
  </div>  
</template>  
  
<script>  
import { onMounted } from 'vue';  
import { useRouter } from 'vue-router';  
  
export default {  
  setup() {  
    const router = useRouter();  
  
    onMounted(() => {  
      // 检查用户ID的逻辑（这里只是一个示例）  
      const userId = localStorage.getItem('userId'); // 假设用户ID存储在localStorage中  
  
      if (!userId) {  
        // 如果没有用户ID，导航到登录页面  
        router.push('/login');  
      }  
    });  
  
    return {};  
  }  
};  
</script>

import { createRouter, createWebHistory } from 'vue-router';  
import LoginPage from './views/LoginPage.vue';  
import SplashPage from './views/SplashPage.vue';  
import HomePage from './views/HomePage.vue';  
  
const routes = [  
  { path: '/login', component: LoginPage },  
  { path: '/splash', component: SplashPage },  
  { path: '/home', component: HomePage },  
  // ... 其他路由  
];  
  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes,  
});  
  
export default router;

import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router'; // 引入上面创建的router实例  
  
const app = createApp(App);  
app.use(router);  
app.mount('#app');