完善Vue简单项目的部分功能(ElementUI之首页导航&左侧菜单)

约定不等于承诺〃 2023-10-13 23:08 85阅读 0赞

#### 完善Vue简单项目的部分功能 ####

*   *  1.Mockjs
     *   *  1.1.什么是Mock.js
         *  1.2.安装与配置
         *   *  1.2.1.安装mockjs
             *  1.2.2.引入mockjs
         *  1.3.mockjs使用
         *   *  1.3.1.定义测试数据文件
         *  1.3.2.mock拦截ajax请求
         *   *  1.3.3.数据模板定义规则（额外知识，要用的时候有用）
     *  2.注册登录界面的切换(js如何做组件路由)
     *  3.总线组件通信
     *  4.退出功能

### 1.Mockjs ###

#### 1.1.什么是Mock.js ####

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

*  老大，接口文档还没输出，我的好多活干不下去啊！
 *  后端小哥，接口写好了没，我要测试啊！

> 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

众所周知Mock.js因为两个重要的特性风靡前端:

*  **数据类型丰富**：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
 *  **拦截Ajax请求**：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

更多内容，可查看[Mockjs][]官方

#### 1.2.安装与配置 ####

##### 1.2.1.安装mockjs #####

`npm i mockjs -D`

![在这里插入图片描述][8b26812602fd4f44905ee9e7e4c88399.png]  
当我们安装完成后，就会出现这个样子  
![在这里插入图片描述][eb24b49573ce419aa931371ad7b46db4.png]

##### 1.2.2.引入mockjs #####

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的`dev.env.js`和`prod.env.js`做一个配置，如下：

*  **dev.env.js**

module.exports = merge(prodEnv, {
        
      NODE_ENV: '"development"',
    	MOCK: 'true'
    })

*  **prod.env.js**

module.exports = {
        
      NODE_ENV: '"production"',
    	MOCK: 'false'
    }

*  **main.js**

//开发环境下才会引入mockjs
    process.env.MOCK && require('@/mock')

导入写好的mock-login.js文件和mock中的index.js文件

#### 1.3.mockjs使用 ####

##### 1.3.1.定义测试数据文件 #####

为每个\*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

创建`src/mock/json`目录，定义登录测试数据文件login-mock.js：

*  login-mock.js

// const loginInfo = {
        
    // 	code: -1,
    // 	message: '密码错误'
    // }
    
    //使用mockjs的模板生成随机数据
    const loginInfo = {
        
    	'code|-1-0': 0,
    	'message|3-10': 'msg'
    }
    export default loginInfo;

#### 1.3.2.mock拦截ajax请求 ####

在src/mock目录下创建index.js，定义拦截路由配置：

*  index.js

import Mock from 'mockjs' //引入mockjs，npm已安装
    import action from '@/api/action' //引入请求地址
    
    //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    Mock.setup({
        
    	// timeout: 400  //延时400s请求到数据
    	timeout: 200 - 400 //延时200-400s请求到数据
    })
    
    //引登陆的测试数据，并添加至mockjs
    import loginInfo from '@/mock/json/login-mock.js'
    let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    Mock.mock(s1, "post", loginInfo)
    // Mock.mock(s1, /post|get/i, loginInfo)

配置完成之后，直接使用axios配置post或get请求，模拟测试效果。  
启动一下项目 `npm run dev`  
点击登录，出现下界面，能够拿到模拟数据  
![在这里插入图片描述][00a71e7f922d4817b179c9a626270f26.png]

##### 1.3.3.数据模板定义规则（额外知识，要用的时候有用） #####

请在使用的Vue组件中，先导入Mock模块

import Mock from 'mockjs'

*  **生成随机id值**

使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 \[, 参数\])

let uid1 = Mock.Random.guid();
    //使用占位符的方式
    let uid2 = Mock.mock("@guid");
    console.log(uid1);
    console.log(uid2);

*  **string**

let obj1 = Mock.mock({
        
      'star|1-5':"★",//生成指定范围长度的字符串
      info:'静态的字符串',//静态字符串
      name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
    })
    console.log(obj1);

*  **number 自增**

\+1 是指，在id的起始值每次调用+1

// +1 是指，在id的起始值每次调用+1
    let temp = {
        
    	"id|+1":1000001
    }
    console.log(Mock.mock(temp)); // 1000001
    console.log(Mock.mock(temp)); // 1000002
    console.log(Mock.mock(temp)); // 1000003
    console.log(Mock.mock(temp)); // 1000004
    console.log(Mock.mock(temp)); // 1000005
    console.log(Mock.mock(temp)); // 1000006

*  **number随机生成**

小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)

let obj2 = Mock.mock({
        
        'age|1-100':0,//随机生成0-100整数
        'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
        'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
        'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
    })
    console.log(obj2);

*  **boolean值**

let flag = {
        
        'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false
        'flag2|1':false,//值位>=1时，boolean随机取值
        "flag3|1-2":true
    }
    console.log(Mock.mock(flag));

*  **城市随机取值**

let city = Mock.mock({
        
        "city1|2":{
        //数字2表示随机取2个值
            addr1:'@city',//占位符@city表示随机生成城市
            addr2:'@city',//占位符@city表示随机生成城市
            addr3:'@city',//占位符@city表示随机生成城市
            addr4:'@city',//占位符@city表示随机生成城市
        },
        "city2|1-3":{
        //数字1-3表示随机取1-3个值
            addr1:'@city',//占位符@city表示随机生成城市
            addr2:'@city',//占位符@city表示随机生成城市
            addr3:'@city',//占位符@city表示随机生成城市
            addr4:'@city',//占位符@city表示随机生成城市
        }
    })
    console.log(city);

*  **枚举取值,从数组中随机取值**

let gender = Mock.mock({
        
        'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值
        'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值
    })
    console.log(gender);

*  **正则表达式规则**

let obj7 = Mock.mock({
        
        user:{
        
        	name:'@cname',
        },
        tel:/1[0-9]{10}/,
        //正则表达式可以使用插件
        email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        //函数表达式
        info:function(){
        
            //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
            return `我的手机号码是:${
          this.tel},我的邮箱是:${
          this.email},我的身份证号码是:${
          this.cardId}`
        },
        // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
        //          ==>   / 表示在模板数据中的层级关系，上下级
        message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
    })
    console.log(obj7);

*  **日期生成**

let timer = Mock.mock({
        
        day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
        day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
        time1:'@time',//@time占位符可以随机生成mock格式的时分秒
        time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
        daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
        nowTime:'@now'
    })
    console.log(timer);

*  **图片生成**

生成的是带参数的图片地址，可以根据地址获取图片

let imgs = Mock.mock({
        
        img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
        img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
        img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
        // mock占位符调用时，需要传递参数，参数也可以是占位符
        img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
        //可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
        img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
    });
    console.log(imgs);

效果展示  
打开emlementUI官网，复制两个模板过来  
贴到自己代码上

![在这里插入图片描述][917e5805da9145ea9e76e8a97bc0e865.png]

if (resp.data.code == 0) {
        
                this.$message({
        
                  message: resp.data.message,
                  type: 'success'
                });
              } else {
        
                this.$message.error(resp.data.message);
              }

然后注意 要用es6中的箭头函数的写法，不然如果嵌套在函数中的话，这个this就不知道指向的是哪个this了，指向的就不是vue的实例了  
![在这里插入图片描述][6c6bddcb9ccd459ca1cff3ff6ef43703.png]

### 2.注册登录界面的切换(js如何做组件路由) ###

复制一份Login.vue的代码，稍作修改

<template>
      <div class="login-wrap">
        <el-form class="login-container">
          <h1 class="title">注册</h1>
          <el-form-item label="">
            <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top:-10px">
            
            <el-link type="primary" @click="gotoLogin()">已有账号？去登录</el-link>
          </el-row>
        </el-form>
      </div>
    </template>
    
    <script>
      // import axios from 'axios'
      // import qs from 'qs'
      export default {
        
        name: 'Login',
        data() {
        
          return {
        
            username: null,
            password: null
          }
        },
        methods: {
        
          // doSubmit() {
        
          //   let param = {
        
          //     username: this.username,
          //     password: this.password
          //   }
          //   let url = 'http://localhost:8081/ssm/user/userLogin'
          //   console.log(param)
          //   axios.get(url, {
        
          //     params: param
          //   }).then(function(resp) {
        
          //     console.log(resp)
          //   }).catch(function(resp) {
        
    
          //   })
          // },
          doSubmit() {
        
            let param = {
        
              username: this.username,
              password: this.password
            }
            let url = this.axios.urls.SYSTEM_USER_DOLOGIN
            console.log(param)
            this.axios.post(url, param).then(resp => {
        
              console.log(resp)
              if (resp.data.code == 0) {
        
                this.$message({
        
                  message: resp.data.message,
                  type: 'success'
                });
              } else {
        
                this.$message.error(resp.data.message);
              }
            }).catch(resp => {
        
    
            })
          },
          gotoLogin() {
        
            this.$router.push({
        
              path: '/Login'
            });
          }
        }
      }
    </script>
    
    <style scoped>
      .login-wrap {
        
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-top: 10%;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMTgiIG9wYWNpdHk9IjAuOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzQuOTAxNDE2LCA1NjkuNjk5MTU4KSByb3RhdGUoLTcuMDAwMDAwKSB0cmFuc2xhdGUoLTc0LjkwMTQxNiwgLTU2OS42OTkxNTgpIHRyYW5zbGF0ZSg0LjkwMTQxNiwgNTI1LjE5OTE1OCkiPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTExIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjI1IiBjeD0iNjMuNTc0ODc5MiIgY3k9IjMyLjQ2ODM2NyIgcng9IjIxLjc4MzA0NzkiIHJ5PSIyMS43NjYwMDgiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjU5OTk5OTk2NCIgY3g9IjUuOTg3NDY0NzkiIGN5PSIxMy44NjY4NjAxIiByeD0iNS4yMTczOTEzIiByeT0iNS4yMTMzMDk5NyI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02NC4yNzc1NTgyLDMzLjE3MDQ5NjMgTDExOS4xODU4MzYsMTYuNTY1NDkxNSIgaWQ9IlBhdGgtMTIiIHN0cm9rZT0iI0NGREFFNiIgc3Ryb2tlLXdpZHRoPSIxLjczOTEzMDQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDIuMTQzMTcwOCwyNi41MDAyNjgxIEw3LjcxMTkwMTYyLDE0LjU2NDA3MDIiIGlkPSJQYXRoLTE2IiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMC43MDI2Nzg5NjQiIG9wYWNpdHk9IjAuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtZGFzaGFycmF5PSIxLjQwNTM1Nzg5OTg3MzE1MywyLjEwODAzNjk1MzQ2OTk4MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSIgb3BhY2l0eT0iMC40NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcyLjAwMDAwMCwgMTMxLjAwMDAwMCkiIGZpbGw9IiNFNkExQTYiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yLUNvcHktMiIgY3g9IjcuMDE5NjA3ODQiIGN5PSI3LjE0NjM0MTQ2IiByeD0iNi40NzA1ODgyNCIgcnk9IjYuNDc1NjA5NzYiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAuNTQ5MDE5NjA4LDEzLjYyMTk1MTIgQzQuMTIyNjI2ODEsMTMuNjIxOTUxMiA3LjAxOTYwNzg0LDEwLjcyMjcyMiA3LjAxOTYwNzg0LDcuMTQ2MzQxNDYgQzcuMDE5NjA3ODQsMy41Njk5NjA5NSA0LjEyMjYyNjgxLDAuNjcwNzMxNzA3IDAuNTQ5MDE5NjA4LDAuNjcwNzMxNzA3IEwwLjU0OTAxOTYwOCwxMy42MjE5NTEyIFoiIGlkPSJPdmFsLTItQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjc4NDMxNCwgNy4xNDYzNDEpIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMuNzg0MzE0LCAtNy4xNDYzNDEpICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQuNTk2Nzc0LCAyMy4xMTExMTEpIiBmaWxsPSIjQkFDQUQ5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtNyIgb3BhY2l0eT0iMC40NSIgY3g9IjkuMTg1MzQ3MTgiIGN5PSI4Ljg4ODg4ODg5IiByeD0iOC40NzQ1NzYyNyIgcnk9IjguNTU2MTQ5NzMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBDMTMuODY1NzI2NCwxNy40NDUwMzg2IDE3LjY1OTkyMzUsMTMuNjE0MzE5OSAxNy42NTk5MjM1LDguODg4ODg4ODkgQzE3LjY1OTkyMzUsNC4xNjM0NTc4NyAxMy44NjU3MjY0LDAuMzMyNzM5MTU2IDkuMTg1MzQ3MTgsMC4zMzI3MzkxNTYgTDkuMTg1MzQ3MTgsMTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktMiIgZmlsbC1vcGFjaXR5PSIwLjYiIGZpbGw9IiNEMURFRUQiIGN4PSI4Ljc1IiBjeT0iMzMuMjUiIHI9IjguNzUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTQiIGZpbGwtb3BhY2l0eT0iMC42IiBmaWxsPSIjRDFERUVEIiBjeD0iMjQzLjgzMzMzMyIgY3k9IjMwLjMzMzMzMzMiIHI9IjUuODMzMzMzMzMiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNS1Db3B5LTUiIGZpbGw9IiNFMEI0QjciIGN4PSIxNzUuNTgzMzMzIiBjeT0iMjMyLjc1IiByPSI1LjI1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
        /* background-color: #112346; */
        background-repeat: no-repeat;
        background-position: center right;
        background-size: 100%;
      }
    
      .login-container {
        
        border-radius: 10px;
        margin: 0px auto;
        width: 350px;
        padding: 30px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        text-align: left;
        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
      }
    
      .title {
        
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
      }
    </style>

构建注册页面。  
别忘了在router/index.js页面中导入Register.vue哦

![在这里插入图片描述][83d90504d5324c3bad6556460bb3f632.gif_pic_center]

使用`this.$router.push({})`实现路由跳转的几种方式：

*  **参数为字符串，即路径名称**

//  路径/home对应router目录下index.js中定义的path属性值
    this.$router.push('/home');

*  **参数为对象**

//  对应router目录下index.js中定义的path
    this.$router.push({
        path:'/home'});

*  **参数为路由命名**

//  对应router目录下index.js中定义的name
    this.$router.push({
        name:'Home'});

*  **带参数**

// 传递参数：params里面放置的是我们要传递过去的参数
    this.$router.push({
        name:'Home',params:{
        user:'david'}});
    
    // 查询参数：传递过去的内容会自动拼接变成/home?user=david
    this.$router.push({
        path:'/home',query:{
        user:'david'}});

> **query语法与params语法的区别**：
> 
>  *  \*\*写法的不同：\*\*query的语法用于path编写传参地址；params的语法用于name编写传参地址
>  *  \*\*接收方式不同：\*\*query语法使用`this.$route.params.name`；params语法使用`this.$route.query.name`
>  *  \*\*刷新页面参数消失问题：\*\*query在刷新页面时参数不会消失；params再刷新页面时参数会消失
>  *  \*\*参数显示不同：\*\*query传递参数会显示在地址栏上，相当于get请求；params传递参数不会显示在地址栏上，相当于post请求

### 3.总线组件通信 ###

主页搭建参考目录`资料\src\vue`中的vue组件。

*  AppMain.vue：布局容器组件
 *  LeftAside.vue：左侧菜单组件
 *  TopNav.vue：首页导航组件

根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。

*  子组件往父组件传递数据(this.$emit)：TopNav -> AppMain
 *  父组件往子组件传递数据(props)：AppMain -> LeftAside  
    ![在这里插入图片描述][ad60f00bd3384c98b453d5009f66041a.png]  
    ![在这里插入图片描述][02cf00565acb4ceaa1315f0fa042be4c.png]  
    ![在这里插入图片描述][ae28cfbaa576425f9f2a1fa4d2bc1c77.png]  
    ![在这里插入图片描述][28359f995c144f9fb8d1421459bfbeb5.png]  
    在AppMain中

//注册组件
        components:{
        TopNav,LeftNav},
        data(){
        
          return{
        
            asideClass:'main-aside'
          }
        },
        created(){
        
          this.$root.BUS.$on('docollapsed',v=>{
        
            //v指的是topNav传递过来的this.collapsed
            this.asideClass = v?'main-aside-collapsed':'main-aside';
          });
        }

在LeftNav中

在TopNav中

![在这里插入图片描述][5a8f12bcbb8f4c2385aa9e22671f09a5.png]  
![在这里插入图片描述][0072638dad444284aab4ff5cdd2e3faf.png]

### 4.退出功能 ###

在methods中写上

exit(){
        
            this.$router.push({
        path:'/'})
          }

![在这里插入图片描述][7a23f9ffbbee4b1aac8d3c8b6dc03107.gif_pic_center]

[Mockjs]: http://mockjs.com/
[8b26812602fd4f44905ee9e7e4c88399.png]: https://img-blog.csdnimg.cn/8b26812602fd4f44905ee9e7e4c88399.png
[eb24b49573ce419aa931371ad7b46db4.png]: https://img-blog.csdnimg.cn/eb24b49573ce419aa931371ad7b46db4.png
[00a71e7f922d4817b179c9a626270f26.png]: https://img-blog.csdnimg.cn/00a71e7f922d4817b179c9a626270f26.png
[917e5805da9145ea9e76e8a97bc0e865.png]: https://img-blog.csdnimg.cn/917e5805da9145ea9e76e8a97bc0e865.png
[6c6bddcb9ccd459ca1cff3ff6ef43703.png]: https://img-blog.csdnimg.cn/6c6bddcb9ccd459ca1cff3ff6ef43703.png
[83d90504d5324c3bad6556460bb3f632.gif_pic_center]: https://img-blog.csdnimg.cn/83d90504d5324c3bad6556460bb3f632.gif#pic_center
[ad60f00bd3384c98b453d5009f66041a.png]: https://img-blog.csdnimg.cn/ad60f00bd3384c98b453d5009f66041a.png
[02cf00565acb4ceaa1315f0fa042be4c.png]: https://img-blog.csdnimg.cn/02cf00565acb4ceaa1315f0fa042be4c.png
[ae28cfbaa576425f9f2a1fa4d2bc1c77.png]: https://img-blog.csdnimg.cn/ae28cfbaa576425f9f2a1fa4d2bc1c77.png
[28359f995c144f9fb8d1421459bfbeb5.png]: https://img-blog.csdnimg.cn/28359f995c144f9fb8d1421459bfbeb5.png
[5a8f12bcbb8f4c2385aa9e22671f09a5.png]: https://img-blog.csdnimg.cn/5a8f12bcbb8f4c2385aa9e22671f09a5.png
[0072638dad444284aab4ff5cdd2e3faf.png]: https://img-blog.csdnimg.cn/0072638dad444284aab4ff5cdd2e3faf.png
[7a23f9ffbbee4b1aac8d3c8b6dc03107.gif_pic_center]: https://img-blog.csdnimg.cn/7a23f9ffbbee4b1aac8d3c8b6dc03107.gif#pic_center