vue实现登录注册界面

Vue可以通过使用组件和路由来实现登录和注册界面，下面是一个简单的示例：

1. 创建登录和注册组件

在Vue中创建两个组件，分别用于登录和注册。

<template>
  <div>
    <h2>Login</h2>
    <form>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<template>
  <div>
    <h2>Register</h2>
    <form>
      <input type="text" placeholder="Username" />
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button type="submit">Register</button>
    </form>
  </div>
</template>

2. 创建路由

在Vue中创建路由，将两个组件与不同的URL关联起来。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

3. 创建导航菜单

在Vue中创建导航菜单，让用户能够选择登录或注册。

<template>
  <div>
    <h1>My App</h1>
    <nav>
      <ul>
        <li><router-link to="/login">Login</router-link></li>
        <li><router-link to="/register">Register</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

4. 启动应用程序

启动Vue应用程序，并访问http://localhost:8080/login或http://localhost:8080/register进行登录或注册。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')