vue+node全栈移动商城【7】路由跳转-注册页面
从现在开始,咱们要用到一些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前端教室,谢谢。
更有前端学习群,让你组团学习,更快进步。
相关推荐
wangxuekuan 2020-11-24
xuedabao 2020-11-19
hjr 2020-10-21
sjun0 2020-11-12
bestallen 2020-08-17
80143853 2020-08-17
Tplinkly 2020-08-15
dingyahui 2020-08-12
JiangMengYa 2020-07-30
BingGoGo技术 2020-07-25
前端小白 2020-07-19
JudeJoo 2020-07-14
bowean 2020-07-05
82344699 2020-07-05
85423468 2020-06-26
tuxlcsdn 2020-06-21
独行者0 2020-06-20