基於第一篇的樣式，給按鈕、超連結加上跳轉，用vue-router 實現頁面的跳轉。

首先，新增一個可以跳轉的頁面：Home.vue

<template>
<div>
    <h1>主頁面</h1>歡迎！<b @click = "Login">點這裡登入</b>
</div></template> 

<script>
export default {
   methods: {
       Login () {
           this.$router.replace('/Login')
       }
   }
}</script>
 

然後，在main.js中引入兩個元件：Login、Home，方便後面router呼叫，修改後的main.js 如圖：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//引入路由配置
import  './assets/zhongda.jpeg'
import forgetPass from './components/forgetPass.vue'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

import ElementUI from 'element-ui'
import '../theme/index.css'


//建立和掛載根例項，通過router 配置引數注入路由，從而讓整個應用都有路由功能

Vue.config.productionTip = false
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
 

然後，當然是修改router下的index.js檔案啦，主要是要引入router的兩個路徑，一個指向Login.vue，另一個指向Home.vue：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import Login from '@/components/Login.vue'
//懶載入方式，當路由被訪問的時候才載入對應元件
//const Login = resolve => require(['@/components/Login'], resolve)

Vue.use(Router)

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

然後，就是修改Login.vue中，按鈕“登入”的點選事件了，要求點選按鈕，頁面將自動跳轉到Home.vue，由於我一開始使用el-button標籤和v-on : click始終無法正常跳轉，因此，改變為普通button，再自己調樣式，利用@click = 方法最終實現正常跳轉：

<template>
<!--背景圖-->
<div class = "note" :style = "note">

<!--login框，表單+tab標籤頁的組合-->
<div class = "loginFrame">

<!--表單元件放在外面，標籤欄在裡面-->
    <el-form ref = "AccountForm" :model = "AccountForm"   rules = "rules"  class = "demo-ruleForm login-container">

       <!--tab標籤-->
    <div class = "tabsUser">
    <el-tabs v-model = "activeName" @tab-click = "handleClick" class = "users" style = "height: 30px;font-size: 25px">
        <el-tab-pane label = "學生" name = "students" class = "tab1"></el-tab-pane>
        <el-tab-pane label = "教師" name = "teacher" class = "tab2"></el-tab-pane>
        <el-tab-pane label = "教務老師" name = "eduTeacher" class = "tab3"></el-tab-pane>
    </el-tabs>
    </div>

<div class = "formGroup">
<el-form-item  label = "賬號" prop = "user" >
    <el-input type = "text"  auto-complete = "off" placeholder = "請輸入您的賬號" class = "form-control" ></el-input></el-form-item> 
<el-form-item label = "密碼" prop = "password" class = "form-inline">
    <el-input type = "password" auto-complete = "off" placeholder = "請輸入密碼" class = "form-control" ></el-input></el-form-item>
</div>
<div class = "remFor">
<el-checkbox v-model = "checked" checked class = "remember">記住密碼</el-checkbox>
<router-link to = "/forgetPass" class = "forget ">忘記密碼？</router-link>
<router-view></router-view>
</div>
  
  <div class = "formButton">
<el-form-item style = "width:100%;">
    <button style = "width:100%; height: 35px; background: #3A825E; font-size:14px; font-family:PingFang SC; color:#fff; border-radius:10px " @click =  "login" >登入</button>
</el-form-item>
</div>
    </el-form>
    </div>
    </div>

</template>

<script>

export default {
    name: '登入',
    data() {
        return {
            note: {
                position:"absolute",
                top:"0px",
                left:"0px",
                width: "100%",
                height:"100%",
                backgroundImage: "url(" + require("../assets/zhongda.jpeg") + ")",
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                
            
            },
            AccountForm : {
                username:'admin',
                password:'123456',
            },
            rules: {
                username :[
                    {required: true, message: '請輸入賬號',trigger: 'blur'},
                    //{ validator: validaePass }
                ],
                password: [
                    {required: true,message: '請輸入密碼', trigger: 'blur'},
                    //{ validator: validaePass2 }
                ]
            },
            checked: false
           
        };
        
    },
    methods: {

        login() {
            this.$router.replace('/Home')
            
         }

}
}
</script>

<style>

.login-container {
    
    -webkit-border-radius: 5px;
    border-radius: 15px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: rgba(255,255,255,0.7)

    ;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
   
}
label{
    width:70px;
    text-align:left;
    
    
    }

.form-control{
    width:270px;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;

}
.remember{
    width:250px;
    text-align:left;

    
}
.forget{
    width:500px;
    text-align:right;
    font-size:14px;
    font-family:PingFang SC;
    
}
.remFor{
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.tabsUser{
    display: inline-block;
    margin-left: 0px;
    margin-right:0px;
    text-align:center;
    font-size:25px;
}



 </style>

最終實現的效果是：開啟頁面，預設指向第一個Home.vue頁面，然後點選“點這裡登入”就可以跳轉到登入介面，同樣，點選“登入”按鈕也可以跳轉到Home頁面，效果如下：

最後，考慮到我的系統是想要首先進入登入介面的，因此，我在index.js中做了些許調整，將Login元件的path與Home元件的path互換，讓系統預設路徑變為Login，使用者需要點選才能進入Home頁面，同時，相應的Login.vue/Home.vue的path也要更換。最後實現了頁面之間的跳轉