vue实现路由登录界面和首页

要实现路由登录界面和首页，你需要使用Vue Router和Vue组件。以下是一个基本的示例：

1. 安装Vue Router

npm install vue-router

2. 创建一个登录组件和一个首页组件

<!-- Login.vue -->
<template>
  <div>
    <h1>Login Page</h1>
    <form>
      <!-- Login form -->
    </form>
  </div>
</template>

<script>
export default {
  name: "Login"
}
</script>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

3. 在路由中定义登录和首页的路径

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "./components/Login.vue";
import Home from "./components/Home.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/", component: Login },
  { path: "/home", component: Home }
];

const router = new VueRouter({
  mode: "history",
  routes
});

export default router;

4. 在Vue实例中使用路由

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import router from "./router";

export default {
  router
}
</script>

现在，当用户访问网站时，会看到登录页面。当用户提交表单并被验证成功后，可以使用Vue Router的编程式导航将用户重定向到首页。

具体操作可以参考Vue Router的官方文档：https://router.vuejs.org/zh/