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前端教室，謝謝。 更有前端學習羣，讓你組團學習，更快進步。