vue路由写一个登页跳转到首页 首页里面用element框架写
时间: 2023-12-30 17:02:13 浏览: 27
好的,首先你需要在路由文件中定义两个路径,一个是登陆页的路径,另一个是首页的路径。假设你的登陆页为 `Login.vue`,首页为 `Home.vue`,那么你可以这样定义路由:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]
})
```
接着,你需要在登陆页中添加一个表单,让用户输入账号和密码,并在提交表单时跳转到首页。可以参考以下代码:
```html
<template>
<div>
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="账号" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
login() {
// 在这里编写登陆逻辑,可以使用 axios 发送请求到后端验证账号密码是否正确
// 如果验证通过,就跳转到首页
this.$router.push('/home')
}
}
}
</script>
```
最后,在首页中你可以使用 element-ui 的组件来构建页面,比如 `el-table`、`el-card`、`el-button` 等等。具体可以参考 element-ui 官网上的示例代码。