vue+node全棧移動商城【7】路由跳轉-註冊頁面

從現在開始，我們們要用到一些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前端教室，謝謝。 更有前端學習群，讓你組團學習，更快進步。