脚本宝典收集整理的这篇文章主要介绍了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接口配置文件,咱们就默认把它引入。
打开 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前端教室,谢谢。
更有前端学习群,让你组团学习,更快进步。
以上是脚本宝典为你收集整理的vue+node全栈移动商城【7】路由跳转-注册页面全部内容,希望文章能够帮你解决vue+node全栈移动商城【7】路由跳转-注册页面所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。