共计 1268 个字符，预计需要花费 4 分钟才能阅读完成。
从现在开始，咱们要用到一些 mongoDB 的操作了。然后基本的 mongoDB 的介绍我就不多写了，同学们可以自己百度查一下。它的下载，安装我都是在官网进行的，https://www.mongodb.com/downl… 然后这一块的内容，在这个文字版的系列里，就直接跳过了。
现在咱们要新建一个 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 前端教室，谢谢。更有前端学习群，让你组团学习，更快进步。