Vue 3 中实现引导页

 Vue 3 中实现引导页五秒后自动进入首页，并在进入首页时检查用户ID的逻辑

1. 使用组合式API (setup)
2. 使用Vue Router进行页面导航
3. 在首页组件中检查用户ID
4. 如果无用户ID，导航回登录页面

1. 设置引导页组件

<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>

2. 设置首页组件

在首页组件中，你需要检查用户ID。这通常是通过检查Vuex状态、localStorage、sessionStorage、cookies或API调用等来实现的。

<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>

3. 设置Vue Router

确保你已经设置了Vue Router，并且包含了登录页、引导页和首页的路由。

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;

4. 在你的主应用中使用Vue Router

在你的主Vue应用实例中，你需要安装并使用Vue 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');

注意事项

• 确保你已经正确设置了Vue Router和所有必要的路由。
• 根据你的应用程序逻辑，用户ID的存储和检索方式可能会有所不同（例如，从Vuex、API调用等）。
• 如果你的应用程序涉及用户身份验证，你可能需要添加更多的安全措施来防止未经授权的用户访问受限页面。