一个简单的 Vue 登录页面示例,通过输入用户名和密码进入三个不同的页面(管理员、普通用户和游客)。以下是每个组件的代码和用途:
-
Login.vue 登录组件,包含一个登录表单,用于验证用户名和密码,并会根据用户角色进行重定向。
<template>
<div>
<h1>欢迎来到登录页面</h1>
<form @submit.prevent="submit">
<label>
用户名:
<input type="text" v-model="username" required>
</label>
<br>
<label>
密码:
<input type="password" v-model="password" required>
</label>
<br>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
username: '',
password: ''
}
},
methods: {
submit() {
// 验证用户名和密码
if (this.username === 'admin' && this.password === 'admin') {
this.$router.push('/admin');
} else if (this.username === 'user' && this.password === 'user') {
this.$router.push('/user');
} else {
this.$router.push('/guest');
}
}
}
}
</script>
-
Admin.vue 管理员组件,包含一些管理员特有的信息。
<template>
<div>
<h1>欢迎 {{name}} 管理员登录</h1>
<p>管理员专用页面</p>
</div>
</template>
<script>
export default {
name: 'Admin',
data() {
return {
name: '管理员'
}
}
}
</script>
- User.vue 普通用户组件,包含一些普通用户特有的信息。
<template>
<div>
<h1>欢迎 {{name}} 登录</h1>
<p>普通用户专用页面</p>
</div>
</template>
<script>
export default {
name: 'User',
data() {
return {
name: '普通用户'
}
}
}
</script>
- Guest.vue 游客组件,包含一些游客特有的信息。
<template>
<div>
<h1>欢迎来到游客页面</h1>
<p>这里是供游客参观的页面</p>
</div>
</template>
<script>
export default {
name: 'Guest'
}
</script>
- 最后,在App.vue 中,我们使用 router-view对不同的 URL 进行路由
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- 在main.js中,定义一些路由规则:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Admin from './components/Admin.vue'
import User from './components/User.vue'
import Guest from './components/Guest.vue'
Vue.use(VueRouter)
const routes = [
//默认界面是login
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/admin', component: Admin },
{ path: '/user', component: User },
{ path: '/guest', component: Guest }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
以上是一个简单的 Vue 登录页面示例,通过输入用户名和密码进入三个不同的页面(管理员、普通用户和游客)。