写一个vue登录页面带路由和单页面切换
时间: 2023-06-03 20:04:30 浏览: 97
好的,我可以为您提供编码帮助。以下是一个示例代码,创建一个Vue登录页面,包括路由和单页面切换:
首先,在Vue项目中安装Vue Router:
```
npm install vue-router --save
```
接着,在main.js文件中引入Vue Router,并设置路由:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Dashboard from './components/Dashboard.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Login },
{ path: '/dashboard', component: Dashboard }
]
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
```
上述路由配置包含两个路由:根路由('/')和dashboard路由。根路由指向登录页面,dashboard路由指向登录后的仪表盘页面。
在App.vue组件中,添加路由链接和单页面切换:
```
<template>
<div>
<nav>
<router-link to="/">Login</router-link>
<router-link to="/dashboard">Dashboard</router-link>
</nav>
<router-view></router-view>
</div>
</template>
```
上述代码包含两个路由链接,分别链接到根路由和dashboard路由。同时在模板中需要添加<router-view>元素,显示当前路由的组件内容。
在components文件夹中,创建Login.vue和Dashboard.vue组件。
Login.vue组件中,包含一个登录表单和一个登录按钮。单击“登录”按钮将检查用户名和密码,验证成功后将跳转到dashboard路由:
```
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username">
<input type="password" v-model="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
if (this.username === 'admin' && this.password === 'password') {
this.$router.push('/dashboard')
} else {
alert('Invalid username or password')
}
}
}
}
</script>
```
Dashboard.vue组件中,包含一个欢迎信息和一个注销按钮。单击“注销”按钮将跳转回根路由:
```
<template>
<div>
<h2>Welcome to dashboard, admin!</h2>
<button @click="$router.push('/')">Logout</button>
</div>
</template>
```
到此为止,您已经实现了一个简单的Vue登录页面,包含路由和单页面切换。