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前端教室,谢谢。

更有前端学习群,让你组团学习,更快进步。

vue+node全栈移动商城【7】路由跳转-注册页面


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构、算法与应用(原书第2版)

数据结构、算法与应用(原书第2版)

Sartaj Sahni / 王立柱、刘志红 / 机械工业出版社 / 2015-4 / 79.00元

《数据结构、算法与应用——C++语言描述》是享有盛誉的数据结构教科书的第2版。它完整地包含了基本数据结构的内容,是CS2课程的理想用书。作者Sartaj Sahni通过循循善诱的讲解、直观具体的讨论和基于现实的应用,让读者轻松、愉快地学习。新版书着重利用标准模板库(STL),把书中开发的数据结构和算法与相应的STL实现方法相互关联。本书还增加了很多新的实例和练习题。 书中的应用实例是它的特色......一起来看看 《数据结构、算法与应用(原书第2版)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具