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前端教室，谢谢。 更有前端学习群，让你组团学习，更快进步。