<div id="app"> <router-view></router-view> <template id="login"> <div class="container"> <form class="form-signin"> <h2 class="form-signin-heading">用户登录</h2> <input type="text" class="form-control" placeholder="输出账号" v-model="inputName"> <input type="password" class="form-control" placeholder="输入密码"> <div class="message"> 没有账号？去<router-link to="/register">注册</router-link> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> </form> </div> </template> <template id="register"> <div class="container"> <form class="form-signin"> <h2 class="form-signin-heading">注册账号</h2> <input type="text" class="form-control" placeholder="输入账号" v-model="inputName"> <input type="password" class="form-control" placeholder="输入密码"> <input type="password" class="form-control" placeholder="再次输入密码"> <div class="message"> 已经有账号？现在<router-link to="/login">登录</router-link> </div> <button class="btn-lg-btn-primary btn-block" type="submit">注册</button> </form> </div> </template> </div>6

这段代码是一个基于Vue.js框架的前端代码，使用了Vue Router实现了两个页面的切换：一个是登录页面，一个是注册页面。其中，登录页面和注册页面都包含了一个表单，分别包括输入账号、输入密码、再次输入密码等输入框和一个提交按钮。通过v-model指令，将输入框的值绑定到Vue实例的inputName属性上，方便后续的操作。在页面中还使用了一些Bootstrap样式和Vue Router提供的router-link组件。

相关问题

用Vue2写一个美观的用户登录页面myLogin.vue，登录用户名为：mk，密码为：123456，登陆成功后跳转到myFirst.vue

在Vue2中创建一个美观的用户登录页面（假设你已经安装了Vue Router），可以使用Bootstrap等UI库来美化界面。以下是一个基本的示例，包括`myLogin.vue`和`myFirst.vue`两个文件。首先，确保已安装Vue Bootstrap库，可通过`npm`或`yarn`进行安装：

npm install bootstrap-vue
# 或者
yarn add bootstrap-vue

然后，在`myLogin.vue`中创建登录页面：

<template>
  <div class="container">
    <b-card title="用户登录" class="mb-3">
      <b-form-group label="用户名" :label-cols="6">
        <input v-model="username" type="text" placeholder="请输入用户名 mk">
      </b-form-group>
      <b-form-group label="密码" :label-cols="6">
        <input v-model="password" type="password" placeholder="请输入密码 123456">
      </b-form-group>
      <button @click.prevent="submitForm" :disabled="!isValid" class="btn btn-primary mt-3">
        登录
      </button>
    </b-card>
    <transition name="fade" mode="out-in">
      <router-view v-if="$route.meta.showOnSuccess"></router-view>
    </transition>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  data() {
    return {
      username: '',
      password: '',
      isValid: false,
    };
  },
  methods: {
    submitForm() {
      if (this.username === 'mk' && this.password === '123456') {
        this.$router.replace("/myFirst"); // 登陆成功跳转
        this.$emit('form-submitted', true); // 触发自定义事件通知组件状态变化
      } else {
        alert("用户名或密码错误");
      }
    },
  },
  computed: {
    isValid() {
      return this.username !== '' && this.password !== '';
    },
  },
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在`main.js`或`App.vue`中配置路由：

import VueRouter from 'vue-router';
import MyLogin from './components/myLogin.vue';
import MyFirst from './components/myFirst.vue';

const routes = [
  {
    path: '/login',
    component: MyLogin,
    meta: {
      showOnSuccess: true, // 登录成功后显示此组件
    },
  },
  {
    path: '/myFirst',
    component: MyFirst,
    // 更改权限检查或其他条件在这里
  },
];

const router = new VueRouter({
  routes,
});

// 配置全局守卫以处理登录状态
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('isAuthenticated')) {
    next('/login');
  } else {
    next();
  }
});

new Vue({ router }).$mount('#app');

在这个例子中，当登录信息正确时，会触发`form-submitted`事件，你可以在`myFirst.vue`或者其他适当的地方监听这个事件并处理跳转。同时，我们还设置了一个全局的路由守卫，确保用户只有在登录后才能访问其他页面。