vue+node全栈移动商城【7】路由跳转-注册页面
栏目: JavaScript · 发布时间: 4年前
内容简介:从现在开始,咱们要用到一些mongoDB的操作了。然后基本的mongoDB的介绍我就不多写了,同学们可以自己百度查一下。它的下载,安装我都是在官网进行的,然后这一块的内容,在这个文字版的系列里,就直接跳过了。
从现在开始,咱们要用到一些 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的基本知识,就可以实现。
接下来,在路由中把新建的文件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前端教室,谢谢。
更有前端学习群,让你组团学习,更快进步。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- react离开页面,自定义弹框拦截,路由拦截
- React组件卸载、路由跳转、页面关闭(刷新)之前进行提示
- 给React-Router添加路由页面切换时的过渡动画
- ruby-on-rails – 如何显示404错误页面而不是路由错误?
- 单页面路由工程使用微信分享及二次分享解决方案
- angular ui-router:简单的单页面嵌套路由的实现过程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构、算法与应用(原书第2版)
Sartaj Sahni / 王立柱、刘志红 / 机械工业出版社 / 2015-4 / 79.00元
《数据结构、算法与应用——C++语言描述》是享有盛誉的数据结构教科书的第2版。它完整地包含了基本数据结构的内容,是CS2课程的理想用书。作者Sartaj Sahni通过循循善诱的讲解、直观具体的讨论和基于现实的应用,让读者轻松、愉快地学习。新版书着重利用标准模板库(STL),把书中开发的数据结构和算法与相应的STL实现方法相互关联。本书还增加了很多新的实例和练习题。 书中的应用实例是它的特色......一起来看看 《数据结构、算法与应用(原书第2版)》 这本书的介绍吧!