关于vue的路径发生跳转但是页面却没有改变的问题，import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
// 关键设置：完全禁用devtools
app.config.devtools = false
app.config.productionTip = false
app.mount('#app')
这个是main.js import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/auth' // 确保路径正确
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: () => import('./
components/Login.vue'),
meta: { requiresGuest: true }
},
{
path: '/dashboard',
name: 'dashboard',
component: () => import('./
components/Dashboard.vue'),
meta: { requiresAuth: true }
},
{
path: '/devices',
name: 'devices',
component: () => import('./
components/DeviceList.vue'),
meta: { requiresAuth: true }
},
{
path: '/purchase',
name: 'purchase',
component: () => import('./
components/DevicePurchase.vue'),
meta: { requiresAuth: true }
},
{
path: '/users',
name: 'users',
component: () => import('./
components/UserManagement.vue'),
meta: { requiresAuth: true }
},
{
path: '/:pathMatch(.*)*',
redirect: '/login'
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
const authStore = useAuthStore()
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next('/login')
} else if (to.meta.requiresGuest && authStore.isAuthenticated) {
next('/dashboard')
} else {
next()
}
})
export default router这个是router.js import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useAuthStore = defineStore('auth', () => {
const isAuthenticated = ref(false)
const user = ref(null)
const login = (username, password) => {
// 仅当用户名和密码正确时认证
if (username === 'admin' && password === '123456') {
isAuthenticated.value = true
user.value = { username, role: 'admin' }
return true
}
return false
}
const logout = () => {
isAuthenticated.value = false
user.value = null
}
return { isAuthenticated, user, login, logout }
})这个是auth.js <template>
<div id="app">
<!-- 强制渲染登录组件，绕过router-view -->
<Login v-if="!isAuthenticated" />
<router-view v-else />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/auth.js'
import Login from '@/
components/Login.vue'
const authStore = useAuthStore()
const isAuthenticated = ref(false)
onMounted(() => {
isAuthenticated.value = authStore.isAuthenticated
})
</script>这是App.vue <template>
<div class="login-container">
<div class="login-box">
<h2>宜居 让科技温暖家</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">登录账号</label>
<input
type="text"
id="username"
v-model="username"
placeholder="请输入账号"
required
autocomplete="username"
>
</div>
<div class="form-group">
<label for="password">登录密码</label>
<input
type="password"
id="password"
v-model="password"
placeholder="请输入密码"
required
autocomplete="current-password"
>
</div>
<button type="submit" class="login-btn">登录</button>
</form>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/auth'
const router = useRouter()
const authStore = useAuthStore()
const username = ref('')
const password = ref('')
const handleLogin = async () => {
if (username.value === 'admin' && password.value === '123456') {
try {
await authStore.login(username.value, password.value)
router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
alert('登录失败，请检查账号密码')
}
} else {
alert('账号或密码错误，请重试')
}
}
</script>
<style scoped>
.login-container {
display:
flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.login-box {
width: 400px;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
}
.login-box h2 {
margin-bottom: 2rem;
color: #333;
font-weight: 500;
}
.form-group {
margin-bottom: 1.5rem;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #666;
font-size: 0.9rem;
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.form-group input:focus {
outline: none;
border-color: #409eff;
}
.login-btn {
width: 100%;
padding: 0.75rem;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-btn:hover {
background-color: #66b1ff;
}
</style>这个是Login.vue <template>
<div class="dashboard-container">
<AppHeader />
<AppSidebar />
<main class="main-content">
<div class="content-header">
<h2>智能家居管理系统</h2>
<p>让生活更智能，让管理更轻松</p>
</div>
<div class="stats-container">
<DeviceCard :count="deviceStore.totalDevices" title="设备总数" />
<DeviceCard :count="deviceStore.runningDevices" title="运行中" />
<DeviceCard :count="deviceStore.stoppedDevices" title="已停止" />
</div>
<div class="slogan">
<p>智控一键，生活更简单！</p>
</div>
</main>
</div>
</template>
<script setup>
import AppHeader from './AppHeader.vue'
import AppSidebar from './AppSidebar.vue'
import DeviceCard from './DeviceCard.vue'
import { useDeviceStore } from '@/device.js'
const deviceStore = useDeviceStore()
</script>
<style scoped>
.dashboard-container {
display:
flex;
min-height: 100vh;
}
.main-content {
flex: 1;
margin-left: 200px;
padding: 2rem;
}
.content-header {
margin-bottom: 2rem;
}
.content-header h2 {
font-size: 1.8rem;
color: #333;
margin-bottom: 0.5rem;
}
.content-header p {
color: #666;
font-size: 1rem;
}
.stats-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
}
.slogan {
text-align: center;
margin-top: 2rem;
color: #409eff;
font-size: 1.2rem;
font-weight: 500;
}
</style>这个是Dashboard.vue的代码，给我修改后的完整代码
本文介绍了Adobe Exchange平台上的一款插件，详细展示了该插件的功能与使用方法，帮助用户更好地了解如何利用此工具提高工作效率。
扫一扫
31
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
