vue+node全栈移动商城【7】路由跳转-注册页面

从现在开始，咱们要用到一些mongoDB的操作了。然后基本的mongoDB的介绍我就不多写了，同学们可以自己百度查一下。它的下载，安装我都是在官网进行的，
https://www.mongodb.com/download-center/community
然后这一块的内容，在这个文字版的系列里，就直接跳过了。

---

现在咱们要新建一个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前端教室，谢谢。
更有前端学习群，让你组团学习，更快进步。