JavaWeb--day3--Ajax&Element&路由&打包部署

（以下内容全部来自上述课程及课件）

Ajax

（此章节纯粹演示，因服务器端url链接失效，所以无法实战）

1. 同步与异步

同步：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。

只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
异步：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

2. 原生Ajax（客户端请求）

首先我们再VS Code中创建AJAX的文件夹，并且创建名为01. Ajax-原生方式.html
的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求

html 复制代码

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
 </head>
 <body>
    
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
    
</body>
 <script>
    function getData(){
     
    }
 </script>
 </html>

创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，
提供了各种方法。代码如下：

html 复制代码

//1. 创建XMLHttpRequest 
var xmlHttpRequest  = new XMLHttpRequest();

调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用
send()方法向服务器发送请求，代码如下：

html 复制代码

 //2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-
xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求

我们通过绑定事件的方式，来获取服务器响应的数据。

html 复制代码

 //3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
 //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是
一个正确的Http请求，没有错误
	 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 
 200{
		document.getElementById('div1').innerHTML = 
	xmlHttpRequest.responseText;
	}
}

最后我们通过浏览器打开页面，请求点击按钮，发送Ajax请求，最终显示结果如下图所示：

XHR：xmlHttpRequest，表示异步请求

3. Axios

上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax

请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：
https://www.axios-http.cn

3.1 基本使用

引入Axios文件

html 复制代码

 <script src="js/axios-0.18.0.js"></script>

使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

html 复制代码

 axios({
	 method:"get",
	 url:"http://localhost:8080/ajax-demo1/aJAXDemo1?
 username=zhangsan"
 }).then(function (resp){
 	alert(resp.data);
 })

html 复制代码

axios({
	 method:"post",
	 url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
	 data:"username=zhangsan"
 }).then(function (resp){
 	alert(resp.data);
 });

axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 get 或者 post。
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后
面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为
data 属性的值。

then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数 ，意思是该匿

名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数

是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.2 快速入门（前端实现）

首先在VS Code中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js 文件拷贝到
js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：
然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发
送ajax请求，完整代码如下：

html 复制代码

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial
scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
 </head>
 <body>
    
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
 </body>
 <script>
    function get(){
        //通过axios发送异步请求-get
    }
    function post(){
        //通过axios发送异步请求-post
    }
</script>
 </html>

然后分别使用Axios的方法，完整get请求和post请求的发送
get请求代码如下：

html 复制代码

 //通过axios发送异步请求-get
 axios({
     method: "get",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
 }).then(result => {
     console.log(result.data);
 })

post请求代码如下：

html 复制代码

//通过axios发送异步请求-post
 axios({
     method: "post",
     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
     data: "id=1"
 }).then(result => {
     console.log(result.data);
 })

浏览器打开，f12抓包，然后分别点击2个按钮，查看控制台效果如下：

3.3 请求方法的别名

get：

html 复制代码

 axios.get("http://yapi.smart-
 xwork.cn/mock/169327/emp/list").then(result => {
 	console.log(result.data);
 })

post：

html 复制代码

 axios.post("http://yapi.smart-
 xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
 	console.log(result.data);
 })

前后台分离开发

1. 介绍

我们将原先的工程分为前端工程和后端工程这2个工程，然后前端工程交给专业的前端人员开发，后端工

程交给专业的后端人员开发。前端页面需要数据，可以通过发送异步请求，从后台工程获取。但是，我

们前后台是分开来开发的，那么前端人员怎么知道后台返回数据的格式呢？后端人员开发，怎么知道前

端人员需要的数据格式呢？所以针对这个问题，我们前后台统一指定一套规范！我们前后台开发人员都

需要遵循这套规范开发，这就是我们的接口文档 。

那么基于前后台分离开发的模式下，我们后台开发者开发一个功能的具体流程如何呢？如下图所示：

需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
前后台并行开发：各自按照接口文档进行开发，实现需求
测试：前后台开发完了，各自按照接口文档进行测试
前后段联调测试：前段工程请求后端工程，测试功能

2. YAPI

（亲测网站缺少维护，直接pass）

2.1 介绍

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。其官网地址：http://yapi.pro/

YApi主要提供了2个功能：

API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.2 接口文档管理

注册
添加项目
添加分类
添加接口

从分类开始就一直添加失败，直接pass。

前端工程化

1. 介绍

我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再

工程中导入的，如下图所示：

但是上述开发模式存在如下问题：

每次开发都是从零开始，比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成

2. 入门

2.1 环境准备

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模

板。Vue-cli主要提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装

NodeJS，然后才能安装Vue-cli

NodeJS安装：https://nodejs.cn/download/
（一路next即可）
验证是否安装成功

配置npm的全局安装路径：

路径为安装nodejs文件夹的路径

安装vue-cli

powershell 复制代码

npm install -g @vue/cli

检查是否安装成功：

powershell 复制代码

vue --version

2.2 Vue项目简介

命令行：直接通过命令行方式创建vue项目

powershell 复制代码

 vue create vue-project01

图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建

powershell 复制代码

vue ui

图形化界面如下：

2.3 创建vue项目

首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文

件夹的cmd窗口界面，如下图所示：

然后进入如下界面：

然后再当前目录下，直接输入命令vue ui 进入到vue的图形化界面，如下图所示：

然后选择创建按钮，在vue文件夹下创建项目，如下图所示：

然后来到如下界面，进行vue项目的创建

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

到此，vue项目创建结束

2.4 vue项目目录结构介绍

其中我们平时开发代码就是在src目录下

2.5 运行vue项目

第一种方式：通过VS Code提供的图形化界面，如下图所示：（注意：NPM脚本窗口默认不显
示，可以参考本节的最后调试出来）

点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端
口，我们直接通过浏览器打开地址

最终浏览器打开后，呈现如下界面，表示项目运行成功

对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js
文件的内容，添加如下代码：

html 复制代码

 devServer:{
 	port:7000
 }

如下图所示，然后我们关闭服务器，并且重新启动，

重新启动如下图所示：

端口更改成功，可以通过浏览器访问7000端口来访问我们之前的项目

第二种方式：命令行方式
直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve 即可，如下图所示：
补充：NPM脚本窗口调试出来
第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，如下图所示

然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm
脚本选项，如图所示

然后就能都显示NPM脚本小窗口了。

对于vue项目，index.html文件默认是引入了入口函数main.js文件，所以index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富

import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue' 导入当前目录下得App.vue并且起名为App
new Vue(): 创建vue对象
$mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
router: 路由，详细在后面的小节讲解
render: 主要使用视图的渲染的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：

首页内容如何呈现的？这就涉及到render中的App了，如下图所示：

这部分讲的大概就是基本不动main.js，都是将其他页面（如上述的App）引入（import）到main中

首先看见的是页面（html），它需要进入主入口（main）才能显示出来。主入口中需要包含页面的格式样式（css）和操作之后的前后演示（JS，不过用Vue体现）。

与此同时，Vue中又可以包含上述三个组件（html，css和js的类似功能）。

所以实际操作只着手于index.html和Vue。

Vue组件库Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
组件：组成网页的部件。例如超链接、按钮、图片、表格等等。
官网：https://element.eleme.cn/#/zh-CN
对比图：

1. 快速入门

安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

powershell 复制代码

 npm install element-ui@2.15.3

在main.js这个入口js文件中引入ElementUI的组件库

html 复制代码

 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法，代码如下：

html 复制代码

<template>
 </template>
 <script>
 export default {
 }
 </script>
 <style>
 </style>

去ElementUI的官网，找到组件库，然后找到按钮组件，抄写代码即可，具体操作如下图所示：
需要在默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

html 复制代码

<template>
 <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
 </template>
 <script>
 import ElementView from './views/Element/ElementView.vue'
 export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
 }
 </script>
 <style>
 </style>

运行我们的vue项目，浏览器直接访问之前的7000端口，展示效果如下图所示：

到此，我们ElementUI的入门程序编写成功

2. Element组件

2.1 Table表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

首先我们需要来到ElementUI的组件库中，找到表格组件，如下图所示：
复制代码到我们之前的ElementVue.vue组件中，需要注意的是，我们组件包括了3个部分，如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示：
template模板部分：

script脚本部分：
回到浏览器，我们页面呈现如下效果：

组件属性详解

data: 主要定义table组件的数据模型
prop: 定义列的数据应该绑定data中定义的具体的数据模型
label: 定义列的标题
width: 定义列的宽度

PS:Element组件的所有属性都可以在组件页面的最下方找到，如下图所示：

2.2 Pagination分页

Pagination: 分页组件，主要提供分页工具条相关功能。其展示效果图下图所示：

在官网找到分页组件，我们选择带背景色分页组件，如下图所示：
复制代码到我们的ElementView.vue组件文件的template中，拷贝如下代码：

html 复制代码

<el-pagination
 background
 layout="prev, pager, next"
 :total="1000">
 </el-pagination>

组件属性详解

background: 添加北京颜色，也就是上图蓝色背景色效果。
layout: 分页工具条的布局，其具体值包含sizes , prev , pager , next , jumper , -> , total , slot 这些值
total: 数据的总数量

组件事件详解

size-change ： pageSize 改变时会触发
current-change ：currentPage 改变时会触发

2.3 Dialog对话框

Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。

需要在ElementUI官方找到Dialog组件，如下图所示：
复制如下代码到我们的组件文件的template模块中

html 复制代码

 <br><br>
 <!--Dialog 对话框 -->
 <!-- Table -->
 <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格
的 Dialog</el-button>

 <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
 	<el-table :data="gridData">
 		<el-table-column property="date" label="日期" width="150">
 </el-table-column>
 		<el-table-column property="name" label="姓名" width="200">
 </el-table-column>
 		<el-table-column property="address" label="地址"></el-table-column>
 	</el-table>
 </el-dialog>

复制数据模型script模块中：

html 复制代码

 gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,

组件属性详解

visible.sync ：是否显示 Dialog

visible属性绑定的dialogTableVisble属性一开始默认是false，所以对话框隐藏；然后我们点击按钮，触发事件，修改属性值为true，
然后对话框visible属性值为true，所以对话框呈现出来。

2.4 Form表单

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

需要在ElementUI的官方找到对应的组件示例：
制作一个新的对话框

html 复制代码

 <br><br>
 <!-- Dialog对话框-Form表单 -->
 <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 
 Dialog</el-button>
 
 <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
 
 </el-dialog>

，针对这个新的对话框，我们需要在data中声明新的变量dialogFormVisible来控制

对话框的隐藏与显示，代码如下：

html 复制代码

dialogFormVisible: false,

复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中

html 复制代码

 <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
  <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                    <el-time-picker placeholder="选择时间" vmodel="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
            
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

表单项标签使用了v-model双向绑定，所以我们需要在vue的数据模型中
声明变量，同样可以从官方提供的代码中复制粘贴，但是我们需要去掉我们不需要的属性，通过观察上述代码，我们发现双向绑定的属性有4个，分别是form.name,form.region,form.date1,form.date2,所以最终数据模型如下：

html 复制代码

 form: {
  name: '',
  region: '',
  date1: '',
  date2:''
  },

同样，官方的代码中，在script部分中，还提供了onSubmit函数，表单的立即创建按钮绑定了此函数，我们可以输入表单的内容，而表单的内容是双向绑定到form对象的，所以我们修改官方的onSubmit函数如下即可，而且我们还需要关闭对话框，最终函数代码如下：

html 复制代码

onSubmit() {
       console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }

打开浏览器，我们打开对话框，并且输入表单内容，点击立即创建按钮，呈现如下效果:

案例

制作类似格式的页面
即上面是标题，左侧栏是导航，右侧是数据展示区域
右侧需要展示搜索表单
右侧表格数据是动态展示的，数据来自于后台
实际示例效果如下图所示：

使用Element中的Container布局容器

具体填充顶部标题、左侧导航栏和右侧核心内容（表单＋表单＋分页条）

异步数据加载：axios＋性别内容修复＋图片内容修复

完整代码：

html 复制代码

 <template>
 	<div>
 	
 		<!-- 布局组件 container-->
 		<!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
 		<el-container style="height: 700px; border: 1px solid #eee">
 		<!-- 顶部标题 -->
 		<el-header style="font-size:40px;background-color: rgb(238, 241, 246)">
		tlias 智能学习辅助系统
		</el-header>
            <el-container>

				<!-- 左侧导航栏 menu-->
                <el-aside width="230px"  style="border: 1px solid #eee">
                     <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message">
                            </i>系统信息管理
                            </template>
                          
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                         
                        </el-submenu>
                     </el-menu>
                </el-aside>


                <!-- 右侧核心内容 -->
                <el-main>
                    <!-- 表单 form -->
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.gender" placeholder="性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                          <el-form-item label="入职日期">
                             <el-date-picker
                                v-model="searchForm.entrydate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                             </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                    
                    <!-- 表格 -->
                    <el-table :data="tableData">
                        <el-table-column prop="name"      label="姓名" width="180">
                        </el-table-column>

                        <!-- 图片内容修复-->
                        <el-table-column prop="image"     label="图像" width="180">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="100px" height="70px">
                            </template>
                        </el-table-column>

                        <!-- 性别内容修复 -->
                        <el-table-column prop="gender"    label="性别" width="140">
                            <template slot-scope="scope">
                                {{scope.row.gender==1?"男":"女"}}
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="job"       label="职位" width="140">
                        </el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180">
                        </el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="230">
                        </el-table-column>
                        <el-table-column label="操作" >
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>
                    
                    <!-- Pagination分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="sizes,prev, pager, next,jumper,total"
						 :total="1000">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
 </template>
 
 <script>
 
 <!-- 异步数据加载 -->
 import axios  'axios'
 export default {
     data() {
     <!-- 声明 -->
      return {
        tableData: [
           
        ],
        searchForm:{
            name:'',
            gender:'',
            entrydate:[]
        }
      }
    },
    
    <!-- 方法 -->
    methods:{
        onSubmit:function(){
            console.log(this.searchForm);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    
    <!-- 异步加载 -->
    mounted(){
        axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list")
        .then(resp=>{
            this.tableData=resp.data.data;
        });
    }
 }
 </script>
 
 <style>
 </style>

Vue路由

简单来说，就是当前页面搭好后想点击页面导航（左侧导航栏）中的其他页面需要的操作。

前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系，如下图所示：

当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与url所对应的vue组件。

1. 入门

先安装vue-router插件，可以通过如下命令

powershell 复制代码

npm install vue-router@3.5.1

但是我们不需要安装，因为当初我们再创建项目时，已经勾选了路由功能，已经安装好了。

在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代码如下：

html 复制代码

 import Vue  'vue'
 import VueRouter  'vue-router'
 
 Vue.use(VueRouter)
 
 const routes = [
  {
    path: '/emp',  //地址hash
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')  //对应的vue组件
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
 ]
 const router = new VueRouter({
  routes
 })
 
 export default router

注意需要去掉没有引用的import模块。

在main.js中，我们已经引入了router功能，如下图所示：

需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按钮为router-link,其代码如下：

html 复制代码

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
 </el-menu-item>
 <el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
 </el-menu-item>

需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整代码如下：

html 复制代码

<template>
  <div id="app">
    <!-- {{message}} -->
    <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
 </template>
 
 <script>
 // import EmpView  './views/tlias/EmpView.vue'
 // import ElementView  './views/Element/ElementView.vue'
 export default {
  components: { },
  data(){
    return {
      "message":"hello world"
     }
  }
 }
 </script>
 <style>
 </style>

但是我们浏览器打开地址： http://localhost:7000/ ，发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，所以我们需要在路由配置中/对应的路由组件，代码如下：

html 复制代码

 const routes = [
  {
    path: '/emp',
    name: 'emp',
    component:  () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect:'/emp' //表示重定向到/emp即可
  },
 ]