從現在開始，我們們要用到一些mongoDB的操作了。然後基本的mongoDB的介紹我就不多寫了，同學們可以自己百度查一下。它的下載，安裝我都是在官網進行的， www.mongodb.com/download-ce… 然後這一塊的內容，在這個文字版的系列裡，就直接跳過了。
現在我們們要新建一個register.vue檔案，程式碼如下：
<template>
<div> {{msg}} </div>
</template>
<script>
import axios from 'axios'
import API_LIST from '@/APIList.config'
export default{
name:'register',
data(){
return {
msg:'註冊頁面'
}
}
}
</script>
複製程式碼可以看到程式碼很簡單，只要你有一些vue的基本知識，就可以實現。 上面那個APIList.config，是我們們上一節的node介面配置檔案，我們們就預設把它引入。
接下來，在路由中把新建的檔案register.vue檔案加入到路由中，
開啟 src>router>index.js檔案，程式碼如下：
import Vue from 'vue'
import Router from 'vue-router'
import proShopCartDemo from '@/components/proShopCartDemo'
import register from '@/components/register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'proShopCartDemo',
component: proShopCartDemo
},{
path: '/register',
name: 'register',
component: register
}
]
})
複製程式碼上面的程式碼，你都可以直接複製來用，特別適合零基礎的同學。
現在我們回到首頁，也就是components目錄中的proShopCartDemo.vue檔案，開啟它，在template部分寫，
<div>
<van-button type="danger" @click="loginBtn">登入</van-button>
<van-button type="danger" @click="registerBtn">註冊</van-button>
</div>
複製程式碼不管那麼多，先把登入、註冊都寫上，方法先空著，免得報錯。在下面的script部分的methods裡寫，
//登入
loginBtn(){
},
// 註冊
registerBtn(){
this.$router.push({path:'/register'});
},
複製程式碼registerBtn方法的意思，就是點選註冊按鈕的時候，向路由當中新增一個路徑，並跳轉過去。
這樣就實現了頁面的跳轉，至於註冊頁面如何操作，我們下一節再繼續寫。
更快觀看 更多教程內容，請掃下方二維碼，關注微信公眾號：web前端教室，謝謝。 更有前端學習群，讓你組團學習，更快進步。