vue3路由如何让运行后项目首页是登录页面
时间: 2024-03-05 22:53:21 浏览: 31
要让运行后的Vue3项目首页是登录页面,可以按照以下步骤进行配置:
1. 在router/index.js文件中定义路由:
```
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
2. 在App.vue文件中设置路由出口:
```
<template>
<router-view />
</template>
```
3. 在Login.vue组件中添加登录表单并定义登录方法:
```
<template>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="请输入用户名" />
<input type="password" v-model="password" placeholder="请输入密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 这里可以添加登录验证逻辑
if (this.username === 'admin' && this.password === '123456') {
this.$router.push('/home')
} else {
alert('登录失败,请检查用户名和密码')
}
}
}
}
</script>
```
4. 在Home.vue组件中添加登录成功后的页面内容。
以上步骤完成后,运行Vue3项目后,将会直接跳转到登录页面。当用户输入正确的用户名和密码后,会跳转到主页页面。