首先,安装必要的依赖包。
npm install vue@next vue-router vuex
然后,创建一个名为App.vue
的根组件。
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
接下来,创建一个名为router.js
的路由文件。
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import Login from './components/Login.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/login', component: Login },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
然后,创建一个名为store.js
的Vuex存储文件。
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
isLoggedIn: false,
}
},
mutations: {
login(state) {
state.isLoggedIn = true
},
logout(state) {
state.isLoggedIn = false
},
},
})
export default store
接下来,创建一个名为Home.vue
的组件,作为登录后的主页。
<template>
<div>
<h1>Welcome to the Home page!</h1>
<button @click="logout">Logout</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'Home',
methods: {
...mapMutations(['logout']),
},
}
</script>
然后,创建一个名为Login.vue
的组件,用于用户登录。
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" required>
<input type="password" v-model="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'Login',
data() {
return {
username: '',
password: '',
}
},
methods: {
...mapMutations(['login']),
login() {
// 实际的登录逻辑,例如,发送登录请求到服务器
// 如果登录成功,调用 `this.login()` 来更新 `isLoggedIn` 状态
this.login()
this.$router.push('/') // 登录成功后跳转到主页
},
},
}
</script>
最后,在入口文件main.js
中,初始化Vue应用程序。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App)
.use(router)
.use(store)
.mount('#app')
现在,你可以运行应用程序并访问http://localhost:8080/login
来查看用户登录界面。