写一个vue登录页面带路由和单页面切换用上Element Plus

好的，我可以帮你回答这个问题。Vue登录页面带路由和单页面切换的实现方法如下：

1.创建一个Vue项目并安装Element Plus组件库。你可以使用Vue CLI来创建项目，使用以下命令安装Element Plus：

npm install element-plus --save

2.在main.js文件中引入Element Plus组件库和Vue Router路由器：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.use(ElementPlus)

app.mount('#app')

3.创建一个登录组件和一个主页面组件，分别为Login.vue和Main.vue。

4.在router/index.js文件中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login.vue'
import Main from '@/views/Main.vue'

const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/main',
name: 'Main',
component: Main
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router

5.在Login.vue中添加一个表单，包含用户名和密码输入框，以及一个登录按钮。当用户点击登录按钮时，可以使用axios库向后端发送登录请求：

代码片段：

<el-form :model="form" ref="form" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
</el-form-item>
</el-form>

<script>
import axios from 'axios'

export default {
name: 'Login',
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
handleLogin() {
this.$refs.form.validate((valid) => {
if (valid) {
axios.post('/api/login', this.form).then((res) => {
if (res.data.code === 200) {
this.$router.push('/main')
} else {
this.$message.error('登录失败')
}
})
}
})
}
}
}
</script>

6.在Main.vue中添加一个导航栏和一个路由出口，可以显示子页面的内容。

代码片段：

<el-container>
<el-header>
<el-menu mode="horizontal" @select="handleSelect">
<el-menu-item index="home">首页</el-menu-item>
<el-menu-item index="profile">个人资料</el-menu-item>
<el-menu-item index="settings">系统设置</el-menu-item>
</el-menu>
</el-header>
<el-main style="padding: 20px;">
<router-view></router-view>
</el-main>
</el-container>

<script>
export default {
name: 'Main',
methods: {
handleSelect(key) {
this.$router.push('/' + key)
}
}
}
</script>

7.在子页面组件中添加内容。例如，你可以为每个子页面创建一个组件，例如Home.vue，Profile.vue和Settings.vue。然后，你可以在router/index.js文件中配置每个子页面的路径和组件，如下所示：

import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
import Settings from '@/views/Settings.vue'

const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/main',
name: 'Main',
component: Main,
children: [
{
path: '',
name: 'Home',
component: Home
},
{
path: 'profile',
name: 'Profile',
component: Profile
},
{
path: 'settings',
name: 'Settings',
component: Settings
}
]
}
]

8.最后，你可以通过调用router.push()方法，将用户导航到子页面。例如，当用户点击导航栏中的一个标签页时，将调用handleSelect()方法，并使用router.push()跳转到相应的子页面。

我希望这个回答能帮到你。如果你有任何其他问题，请随时向我提问。