vue-cli3 登陸注冊界面跳轉

 項目結構：

 需要在src下建一個views，views下建兩個界面，A.vue和B.vue,然后在src建一個router.js.

 

 

 

 

A.vue界面

 

<template>
  <div>
    <h3>這是登陸界面</h3>

    <input type="text" placeholder="請輸入用戶名" v-model="username" />

    <input type="password" placeholder="請輸入密碼" v-model="password" />
    <button v-on:click="login">登錄</button>

    <p>
      <router-link to="/b">沒有賬號？馬上注冊</router-link>
    </p>
    <!-- <p v-on:click="ToRegister">沒有賬號？馬上注冊</p> -->
    <br />
    <!-- <router-link to="/">返回</router-link> -->
  </div>
</template>


<style>
.login-wrap {
  text-align: center;
}
h3 {
  text-align: center;
}
span {
  text-align: center;
}
input {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 10px;
  outline: none;
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: red;
  text-align: center;
}

button {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border: none;
  background-color: #41b883;
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}

span {
  cursor: pointer;
}

span:hover {
  color: #41b883;
}
</style>

 

B.vue界面

 

 

<template>
  <div>
    <h3>這是注冊界面</h3>
    <input type="text" placeholder="請輸入手機號" v-model="newUsernumber" />
    <input type="text" placeholder="請輸入用戶名" v-model="newUsername" />
    <input type="password" placeholder="請輸入密碼" v-model="newPassword" />

    <button v-on:click="register">注冊</button>

    <!-- <p v-on:click="ToLogin">已有賬號？馬上登錄</p> -->
    <p>
      <router-link to="/a">已有賬號？馬上登錄</router-link>
    </p>
    <br />
    <!-- <router-link to="/">返回</router-link> -->
  </div>
</template>

<style>
.login-wrap {
  text-align: center;
}

h3 {
  text-align: center;
}
span {
  text-align: center;
}
input {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 10px;
  outline: none;
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}

p {
  color: red;
  text-align: center;
}

button {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border: none;
  background-color: #41b883;
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}

span {
  cursor: pointer;
}

span:hover {
  color: #41b883;
}
</style>

 

 

App.vue

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

　　

 

 

main.js

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");

 

 

 

 

router.js

import Vue from "vue";
import Router from "vue-router";

// import Home from "./views/Home.vue";
import A from "./views/A.vue";
import B from "./views/B.vue";

Vue.use(Router);

export default new Router({
    routes: [
        // {
        //     path: "/",
        //     component: Home
        // },
        {
            path: "/a",
            component: A
        },
        {
            path: "/b",
            component: B
        }
    ]
});

 

 

 

 

最后npm run dev運行就可以了

效果圖