在uniApp中设置起始页为登录页，需修改pages.json配置文件，将登录页路径置于pages数组首位，确保其作为首页加载，需结合登录状态判断：在登录页的onLoad生命周期中，通过uni.getStorageSync检查本地存储的登录状态（如token），若已登录则使用uni.redirectTo或uni.reLaunch跳转至首页，避免重复登录，可通过全局路由守卫（如main.js中beforeEach）拦截未登录用户访问需要权限的页面，强制跳转至登录页，登录成功后，需存储登录状态并跳转至首页，完成登录流程闭环。
UniApp动态设置起始页为登录页的完整实现指南
在UniApp应用开发中,实现“未登录用户显示登录页，已登录用户直接进入首页”的动态起始页逻辑是提升用户体验的关键，本文将系统性地从页面路由配置、登录状态管理、路由跳转策略及状态持久化等角度，详细阐述如何动态设置UniApp的起始页，确保用户首次打开或重新进入应用时，始终根据其登录状态展示正确的页面。
为何需要动态设置起始页？
应用启动时,用户登录状态的动态判断至关重要：
- 未登录用户：直接引导至登录页，完成身份认证或注册流程；
- 已登录用户：无缝跳转至首页或目标功能页，避免重复登录的繁琐操作。
若固定将登录页设为起始页,会导致已登录用户每次打开应用时都重复经历登录流程，严重影响使用流畅性，动态判断登录状态并智能跳转是提升应用体验的必要优化。
核心实现思路
动态起始页的实现逻辑可分解为三个核心步骤：
- 配置基础路由：在
pages.json中声明登录页、首页等关键页面，并设置默认启动页； - 启动状态检测：在应用启动阶段（
App.vue的onLaunch生命周期），通过本地存储获取用户登录状态； - 智能路由跳转：根据登录状态，选择合适的跳转方法（
uni.reLaunch或uni.redirectTo）确保页面栈结构正确。
详细实现步骤
步骤1：配置pages.json路由表
在pages.json中定义登录页和首页的路由信息，通常将登录页设为默认启动页（后续通过动态跳转覆盖），同时配置全局样式确保视觉一致性。
{
"pages": [
// 默认启动页（动态跳转目标）
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom" // 可选：自定义导航栏
}
},
// 登录后跳转目标页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
// 其他页面...
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp应用",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
步骤2：在App.vue中实现状态检测与跳转
App.vue的onLaunch生命周期是应用启动的入口，适合在此处执行登录状态检测和初始跳转逻辑，推荐使用uni.reLaunch清空页面栈，确保起始页的纯净性。
// App.vue
export default {
onLaunch: function() {
console.log('App Launch');
this.initRoute();
},
methods: {
// 初始化路由逻辑
initRoute() {
// 从本地存储获取登录凭证（实际项目中建议使用Vuex/Pinia管理状态）
const token = uni.getStorageSync('authToken');
const isLoggedIn = !!token;
if (isLoggedIn) {
// 已登录：跳转首页（使用reLaunch清空页面栈）
uni.reLaunch({
url: '/pages/index/index',
success: () => {
console.log('已登录用户跳转首页成功');
},
fail: (err) => {
console.error('首页跳转失败:', err);
// 降级处理：跳转至错误页或保持当前页
}
});
} else {
// 未登录：保持默认登录页（无需额外操作）
console.log('未登录用户，显示登录页');
}
}
步骤3：实现登录页逻辑与状态持久化
登录页需包含表单验证、登录请求处理及状态存储功能，登录成功后，将凭证（如Token）和用户信息持久化到本地存储，并执行跳转。
登录页示例（pages/login/login.vue）
<template>
<view class="login-container">
<view class="login-form">
<input
v-model="formData.phone"
type="number"
placeholder="请输入手机号"
maxlength="11"
/>
<input
v-model="formData.password"
type="password"
placeholder="请输入密码"
/>
<button @click="handleLogin" :disabled="isLoading">
{{ isLoading ? '登录中...' : '登录' }}
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLoading: false,
formData: {
phone: '',
password: ''
}
};
},
methods: {
async handleLogin() {
// 表单基础验证
if (!this.formData.phone || !this.formData.password) {
uni.showToast({ title: '请填写完整信息', icon: 'none' });
return;
}
this.isLoading = true;
try {
// 实际开发中替换为真实API调用
const res = await this.mockLoginApi();
if (res.code === 200) {
// 持久化登录状态（建议加密存储敏感信息）
uni.setStorageSync('authToken', res.data.token);
uni.setStorageSync('userInfo', res.data
