第11章 Vue前端框架

第11章Vue前端框架第11章Vue前端框架11.1

Vue简介11.2

Vue脚手架11.3

目录结构11.4

初识setup和ref11.5

模板语法11.6

生命周期钩子11.7

reactive函数11.8

初识Vue组件211.9深入setup11.10

计算属性11.11

条件渲染11.12

列表渲染11.13watch监视11.14

provide与inject11.15

Vue路由11.16

axios发送请求11.1Vue简介

与知名前端框架Angular一样，Vue.js在设计上也使用了MVVM(Model-View-ViewModel)模式。MVVM模式本质上就是MVC的改进版，View绑定到ViewModel，然后执行一些命令，再向它请求一个动作，View和ViewModel之间通过双向绑定建立联系。ViewModel跟Model通讯，告诉它更新来响应UI，这样便使得为应用构建UI非常容易。311.2Vue脚手架vue-cli是Vue的脚手架工具，它大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，搭建了一个测试环境。使用vue-cli前，要确保已经安装了最新版的Node.js和NPM。411.2Vue脚手架使用vue-cli构建一个项目的步骤。（1）创建自己的工作空间，这里以D盘根目录为工作空间。（2）安装vue-cli，直接在cmd命令端口中输入如下命令：D:\>npminstall-g@vue/cli

在cmd命令端口中输入如下命令查看版本：D:\>vue–V（3）在命令端口中输入命令，创建一个基于webpack模板的新项目D:\>vuecreatevue3-demo（4）在命令端口中，切换到项目路径D:\>cdvue3-demo511.2Vue脚手架使用vue-cli构建一个项目的步骤。（5）输入命令，就可以启动这个项目D:\vue3-demo>npmrunserve

项目启动成功后,控制台显示如右图所示。（6）打开浏览器，输入地址http://localhost:8080，页面输出如下图所示。611.3目录结构

使用VisualStudioCode打开项目vue3-demo，可以查看项目的目录结构。7node_modules目录用于存放项目的依赖项。public目录用于存放公共静态资源，该目录下的index.html是项目的主页，即入口html页面。src是项目的核心目录，assets子目录用于存放静态资源文件，如字体、图标、图片等，components子目录用于存放公共组件，使用vue-cli构建项目时，默认会在该目录下创建组件HelloWorld.vue。App.vue是根组件，main.js是项目执行的入口js。.gitignore用来指定git提交时需要忽略的文件格式，.babel.config.js是babel配置文件，package.json用来保存项目依赖项的版本信息，package-lock.json用来保存node_modules目录下所有依赖项的具体来源、版本号和其他信息，README.md是项目的说明文档。11.3目录结构main.js是项目执行的入口js文件，初始时该文件里只有三行代码：import{createApp}from'vue’importAppfrom'./App.vue’createApp(App).mount('#app’)在main.js文件中，通过“import...from...”这个ES6语法中的新特性，先引入一个名为“createApp”的工厂函数，再引入App.vue这个根组件。接下来通过createApp(App)创建一个应用实例对象，createApp方法的参数是根组件对象App，即创建了一个根实例对象，并调用mount方法将这个实例对象挂载到某个html的DOM节点上。一般通过id选择器的形式，指定挂载的DOM元素，这里的“#app”表示挂载到public目录下index.html这个文件中id为“app”的div节点上。811.3目录结构打开index.html文件中，能看到这个id为“app”的div节点。启动项目并通过浏览器访问，首先访问的就是这个index.html文件，因为有一个id为app的挂载点，接着根实例对象就会挂载到这个挂载点上。

911.3目录结构初始时，根组件App.vue内容如右图所示。一个Vue组件主要包括模板、行为和样式三个部分。以根组件App.vue为例，模板是组件中template中的内容（将替代原来挂载点的内容），行为是script中的内容，样式是style中的内容。在script中，使用exportdefault将根组件App.vue导出为一个对象，并通过name属性将导出名称指定为“App”。在其它组件中，就可以使用import引入这个导出的对象了。此外，通过components属性局部注册组件HelloWorld。当然，这个HelloWorld组件需要事先通过import进行引入。

10同时，在根组件App.vue的template中，还需要使用这个组件。11.4初识setup和ref

setup是Vue3组合式API中的一个函数，在setup函数中，可以定义变量和方法等。但是，需要将这些变量和方法return出去，否则无法在模板中使用。在组件HelloWorld.vue中，添加setup函数。1111.4初识setup和ref

ref

也是Vue3组合式API中的一个函数，用来定义响应式变量。在使用ref函数时，需要在组件的script中引入。

import{ref}from"vue";ref函数接受参数并返回一个对象，并将这个参数包装在返回对象的value属性中。在组件HelloWorld.vue的setup函数中，定义一个响应式变量counter。varcounter=ref(0);响应式变量counter的value属性值为0，可以使用counter.value访问或修改响应式变量的值。1211.4初识setup和ref在setup函数中，还可以自定义函数。constadd=()=>{counter.value++;};这里，使用ES6箭头函数语法，定义了函数add，对响应式变量counter进行++操作。箭头函数省略了function关键字，采用箭头“=>”来定义函数。函数的参数放在箭头前面的括号中，函数体跟在箭头后面的花括号中。在setup函数中，将响应式变量counter和自定义函数add通过return返回出去，这样才能在template模板中使用。return{counter,add}1311.4初识setup和ref在组件HelloWorld.vue的template模板中，使用响应式变量counter和自定义函数add。在template模板中，使用了“Mustache”语法（双大括号）的文本插值，{{counter}}将会被替代为组件实例中响应式变量counter的值。无论何时，绑定的组件实例上响应式变量counter的值发生了改变，插值处的内容都会更新。还添加了<button>标签，并通过@click给<button>标签绑定点击事件。单击这个按钮时，会调用自定义函数add，将响应式变量counter的value值加1。1411.4初识setup和ref启动项目并通过浏览器访问，多次单击“+1”按钮，计数不断变化。1511.5模板语法Vue.js使用了基于HTML的模版语法，可以采用简洁的模板语法来声明式的将数据渲染进DOM。通过结合响应系统，在应用状态改变时，能智能地计算重新渲染组件的最小代价并应用到DOM操作上。1611.5.1插值(1)文本插值数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值，在组件HelloWorld.vue的template中，文本插值代码如下：<h1>{{counter}}</h1>1711.5.1插值(2)原始HTML双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。示例：1)

在组件HelloWorld.vue的setup函数中，先定义一个响应式变量msg1varmsg1=ref("<fontcolor='red'size='14'>HelloVue!</font>");2)将变量msg1通过return返回出去return{…,msg1

}3)在template模板中使用v-html指令，如右图所示。启动项目并通过浏览器访问，页面输出如图。1811.5.1插值(3)属性如果要动态更新HTML元素上的属性，比如id、class和style等，可以使用v-bind指令。示例：191)在组件HelloWorld.vue的setup函数中，先定义一个响应式变量styleObject。2)将变量styleObject通过return返回出去。

return{…,styleObject};3)在template模板中使用v-bind:style，给<div>标签动态绑定样式，将其直接绑定到样式对象styleObject。启动项目并通过浏览器访问，页面输出如右图。11.5.1插值

表达式Vue.js提供了完全的JavaScript表达式支持

示例：（1）在组件HelloWorld.vue的setup函数中，先定义三个响应式变量varflag=ref(true);varmessage=ref("HelloVue!");varid=ref(10);（2）将变量这三个变量通过return返回出去（3）在template模板中，使用表达式2011.5.2指令指令(Directives)是带有“

v-

”前缀的特殊特性，用于在表达式的值改变时，将某些行为应用到DOM上。示例（1）在组件HelloWorld.vue的setup函数中，先定义一个响应式变量showvarshow=ref(true);（2）将变量show通过return返回出去return{…,show

};（3）在template模板中，使用v-if指令2111.5.2指令一些指令还可以接收一个参数，在指令名称之后以冒号表示。例如v-bind:href，这里href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。示例（1）在组件HelloWorld.vue的setup函数中，先定义一个响应式变量urlvarurl=ref("");（2）将变量url通过return返回出去return{...url

};（3）在template模板中，使用v-bind:href<hr><pre><av-bind:href="url">百度一下</a></pre>2211.5.3用户输入在input输入框中，可以使用v-model指令来实现双向数据绑定。示例（1）在组件HelloWorld.vue的template模板中，使用v-model<hr><p>{{message}}</p><inputv-model="message">（2）在输入框中修改内容，和它绑定的值也会发生变化2311.5.4缩写Vue.js为v-bind和v-on这两个最常用的指令提供了特定简写。24v-on指令缩写前后的对比<!--完整语法--><av-on:click="doSomething"></a><!--缩写--><a@click="doSomething"></a>v-bind指令缩写前后的对比<!--完整语法--><av-bind:href="url"></a><!--缩写--><a:href="url"></a>11.6生命周期钩子每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监视、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，用户可以在不同阶段添加自己的处理业务逻辑的代码。在组件的setup函数内，可以调用的生命周期钩子包括onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等。onBeforeMount在实例挂载开始之前被调用，onMounted在实例被挂载后调用，onBeforeUpdate在DOM更新前调用，onUpdated在DOM更新后调用，onBeforeUnmount在卸载组件实例之前调用，onUnmounted在卸载组件实例后调用。2511.6生命周期钩子示例（1）要使用生命周期钩子，需要先引入。在组件HelloWorld.vue的script中，使用import引入6个生命周期钩子。

26（2）在组件HelloWorld.vue的setup函数中，添加这些生命周期钩子，并输入提示信息。（3）启动项目并通过浏览器访问，再按下F12键，打开开发者工具，在Console中可以看到setup、onBeforeMount和onMounted这三个函数被依次调用。import{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,}from"vue";（4）单击页面中的“+1”按钮，可以看到onBeforeUpdate和onUpdated这两个函数会被调用11.6生命周期钩子onBeforeUnmount和onUnmounted示例（1）在根组件App.vue的script中引入ref函数。import{ref}from"vue";

27（2）再添加setup函数，并定义一个响应式变量isShow，并通过return返回出去。（3）在根组件App.vue的template中，给HelloWorld元素添加一个条件渲染指令v-if，当变量isShow的值为true时，渲染HelloWorld元素，否则不渲染。（4）最后添加一个用于隐藏和显示HelloWorld元素的button元素，并通过@click给

button元素绑定点击事件，将变量isShow值取反。启动项目并通过浏览器访问，再按下F12键，打开开发者工具，在Console中可以看到setup、onBeforeMount和onMounted这三个函数被依次调用；此时，单击“隐藏/显示HelloWorld组件”按钮，在Console中可以看到onBeforeUnmount和onUnmounted这两个生命周期钩子被调用。11.7reactive函数

reactive用来定义一个对象类型的响应式变量，不能用来定义基本类型的响应式变量。使用reactive函数前，需要先引入。示例（1）在组件HelloWorld.vue的script中，引入reactive函数import{ref,reactive}from"vue";（2）在组件HelloWorld.vue的setup函数中，定义一个对象类型的响应式变量student。（3）在setup函数中，将响应式变量student通过return返回出去。2811.7reactive函数（4）在组件HelloWorld.vue的template模板中，使用响应式变量student。（5）在template模板中，通过{{}}和{{student.age}}输出student对象的name和age属性值。2911.8初识Vue组件组件(Component)是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，通过可复用的小组件可以构建大型应用。组件需要注册后才能使用，注册有全局注册和局部注册两种方式。组件的创建和使用示例（1）在项目vue3-demo的components目录下，新建一个组件Child.vue。（2）在根组件App.vue的script中，先通过import引入组件Child.vue。importChildfrom"./components/Child.vue";3011.8初识Vue组件（3）通过exportdefault中的components属性，采用局部注册的方式，注册组件Child.vue。（4）在根组件App.vue的template模板中，添加<Child/>标签，就可以使用组件Child.vue了。3111.9深入setupsetup函数还可以接收props和context这两个参数。（1）props参数props参数包含父组件传递给子组件的数据，在子组件中，则需要通过props属性指定要接收的数据。示例：根组件App.vue传递数据给子组件Child.vue（1）在根组件App.vue的template中，修改<Child>标签。（2）在子组件Child.vue的exportdefault中，先添加props属性，指定要从父组件接收的属性名为title和content。3211.9深入setup（3）修改子组件Child.vue的setup函数，给它添加一个props参数，该参数包含了从父组件传递来的title和content属性值，经过toRefs函数处理后return出去。（4）使用toRefs函数前，需要引入。在子组件Child.vue的script中，引入toRefs函数。import{toRefs}from'vue’（5）在子组件Child.vue的template模板中，通过文本插值，将从父组件App.vue接收到的title和content属性值显示出来。3311.9深入setup（2）context参数setup函数的第二个参数是context，表示上下文。context是一个普通的JavaScript对象，它包含attrs、slots和emit这三个属性。

1）attrs属性在父组件向子组件传递数据时，子组件需要通过props属性来声明父组件传递的属性名，这样才能从props获取相应的属性值。如果props属性中没有声明，则属性值会出现在context对象的attrs里。props属性中声明的属性名，attrs里就不会出现相应的属性值。props支持支持string以外的类型，而attrs只有string类型。示例：（1）在子组件Child.vue的exportdefault中，修改props属性，将其数组中声明的属性名称content移除，只保留title。3411.9深入setup由于props属性中没有指定content属性名，因此子组件Child.vue无法从props中获取属性content的值。（2）可以从context对象的attrs里可以获得属性content的值。修改setup函数，给setup函数添加第二个参数context，使用toRefs函数对context对象的attrs进行处理。3511.9深入setup

2）slots属性context对象的slots属性用于接收父组件中定义的插槽内容。示例：slots的作用（1）在根组件App.vue的template模板中，先将自结束标签<Child/>修改为包含开始和结束的Child标签，并在Child标签体部添加一个span元素。直接在父组件App.vue的<Child>标签体部定义的内容，在子组件Child.vue中不会被渲染，使用插槽就能解决这个问题。3611.9深入setup（2）在子组件Child.vue的template模板中，添加一个<slot>元素占位（默认插槽），就可以用来显示父组件<Child>标签下的内容了。在子组件Child.vue中的默认插槽<slot></slot>中，还可以提供一个默认内容，如果父组件的<Child>标签中没有为这个插槽提供了内容，就会显示默认的内容，否则默认的内容会被替换掉。3711.9深入setup示例：具名插槽在子组件的<slot>标签上绑定属性值，通过作用域插槽，在父组件的插槽模板中可以拿到子组件绑定的这些属性值，从而实现子组件向父组件的数据传递。（1）修改子组件Child.vue的template模板中名称为“header”的具名插槽，添加一个userName属性，将其值指定为“张三”。<slotname="header"userName="张三"></slot>（2）在根组件App.vue的template中，修改<Child>标签体部相应的template节点。3811.9深入setup

3）emit属性

在子组件中，可以使用context.emit向父组件发送事件。示例：（1）在子组件Child.vue的template模板中，添加一个<button>标签，并给其绑定click事件，单击这个按钮时，会触发postMsg函数。（2）在子组件Child.vue的setup函数中，添加一个postMsg函数。在postMsg函数中，通过context.emit向父组件App.vue发送自定义事件。3911.9深入setup（3）在子组件Child.vue的setup函数的return中，将函数postMsgClick返回出去。return{...,postMsg

};（4）在父组件App.vue的template模板中，修改<Child>标签，给其绑定自定义事件postMsgClick，该事件就是子组件发送来的。当postMsgClick事件触发时，会执行showMsg函数。

<Child@postMsgClick="showMsg"title="hellochild"content="这是父组件App.vue传递的数据">（5）在父组件App.vue的setup函数中，添加一个showMsg函数。在showMsg函数中，通过js的alert函数，弹出一个警告框，显示一段提醒信息和从子组件传递来的参数userName的值。4011.9深入setup（6）在父组件App.vue的setup函数的return中，将函数showMsg返回出去。return{isShow,showMsg

};

4111.10计算属性模板内的表达式非常便利，常用于简单运算。但在模板中放入大量的逻辑会让模板难以维护。为了解决这个问题，可以使用计算属性。使用计算属性，需要先引入。示例（1）在子组件Child.vue的script中，修改import，先引入computed函数，再引入ref函数，用于声明响应式变量。import{toRefs,ref,computed}from"vue";（2）在子组件Child.vue的template中，添加三个<input>标签，用于输入性、名和全名。在input输入框中，使用v-model指令来实现双向数据绑定。4211.10计算属性（3）在子组件Child.vue的setup函数中，使用ref声明响应式变量firstName和lastName，并给它们指定初始值。letfirstName=ref("李");letlastName=ref("四");（4）定义一个计算属性fullName，在computed函数中，提供了get和set方法。（5）再将firstName、lastName和fullName这三个变量return出去。4311.10计算属性将“姓”输入框内容修改为张，此时全名会发生变化。将“全名”输入框内容修改为“诸葛

四”，则“姓”输入框内容也会随之发生变化。4411.11条件渲染与JavaScript的条件语句if、else、elseif类似，Vue.js提供的条件渲染指令v-if、v-else、v-else-if可以根据表达式的值将DOM中元素或组件渲染或销毁。示例（1）在子组件Child.vue的template模板中，添加若干<p>标签，分别使用v-if、v-else-if和v-else添加渲染指令。（2）在子组件Child.vue的setup函数中，声明一个响应式变量score，并指定初始值为85。letscore=ref(85);（3）将score变量return出去。return{...,score};4511.12列表渲染如果想要循环显示一个数组或一个对象属性时，可以使用

v-for

指令。示例1（1）在子组件Child.vue的setup函数中，使用reactive函数声明一个响应式变量students，并指定初始值。（2）为了使用reactive函数，需要在子组件Child.vue的script中通过import引入。import{toRefs,ref,computed,reactive}from"vue";（3）将students变量return出去。

return{...,students};4611.12列表渲染（4）在子组件Child.vue的template模板中，添加一个<ul>标签，在<ul>标签体部再添加一个<li>标签，在<li>标签上添加v-for

指令。4711.12列表渲染除了数组外，对象的属性也可以使用v-for指令进行渲染。示例2（1）在子组件Child.vue的setup函数中，使用reactive函数声明一个响应式变量stu，并指定初始值。（2）在子组件Child.vue的template模板中，添加一个<ul>标签，在<ul>标签体部再添加一个<li>标签，在<li>标签上添加v-for

指令。4811.13watch监视

watch函数可以用来监视响应式数据的变化，并且可以得到newValue（新值）和oldValue（旧值）。使用watch函数，需要先导入。示例1：监视ref定义的数据（1）在子组件Child.vue的script中通过import引入watch函数。import{toRefs,ref,computed,reactive,watch}from"vue";（2）在子组件Child.vue的setup中，使用ref函数声明一个响应式变量counter，并指定初始值。

letcounter=ref(0);（3）将counter变量return出去。

return{...,counter};4911.13watch监视（4）在子组件Child.vue的setup函数中，定义一个函数changeCounter，用于更新counter变量的值。（5）将changeCounter函数return出去。return{...,counter,changeCounter};（6）在子组件Child.vue的setup函数中，定义一个watch函数，用来监视counter值的变化。（7）在子组件Child.vue的template模板中，添加一个<button>标签，给其绑定click事件。单击这个“改变counter”按钮时，会调用自定义函数changeCounter。<hr/><button@click="changeCounter">改变counter</button>5011.13watch监视启动项目并通过浏览器访问按下F12键，打开开发者工具，再多次单击“改变counter”按钮。此时，在Console中可以看到输出信息。每次单击“改变counter”按钮后，都会调用自定义函数changeCounter修改counter变量的值，watch函数监视到counter变量值发生了改变，就会在开发者工具的控制台中输出新值和旧值等信息。5111.13watch监视示例2：监视reactive定义的数据（1）在子组件Child.vue的setup函数中，声明变量goods，并指定初始值。letgoods=reactive({name:"冰箱",price:3999,});（2）将goods变量return出去。return{...,goods};（3）在子组件Child.vue的setup函数中，定义函数changeGoodsName，用于更新goods对象中的name属性值。（4）将changeCounter函数return出去。（5）在子组件Child.vue的setup函数中，定义watch函数，用来监视goods对象中属性值的变化。5211.13watch监视（6）在子组件Child.vue的template模板中，添加一个<button>标签，给其绑定click事件。单击这个“改变goods对象name属性值”按钮时，会调用自定义函数changeGoodsName。<hr/><button@click="changeGoodsName">改变goods对象name属性值</button>启动项目并通过浏览器访问按下F12键，打开开发者工具，再单击“改变goods对象name属性值”按钮。此时，在Console中可以看到输出信息。单击“改变goods对象name属性值”按钮，调用函数changeGoodsName修改goods对象的name属性值，watch函数监视到name属性值发生了改变，就会在开发者工具的控制台中输出信息，但是输出的newVal和oldVal值都是修改后的新值。5311.14provide与inject将数据从父组件传递到子组件时，可以使用props。但是，对于层次比较深的组件，将数据从祖组件传递到孙组件时，使用props可能会比较麻烦。这时，可以使用provide和inject。祖组件（父组件）通过provide属性来提供数据，孙组件（子组件）则通过inject属性来使用这个数据。示例（1）在项目vue3-demo的components目录下，新建一个组件Grandson.vue。初始时，Grandson.vue组件内容。5411.14provide与inject（2）为了让组件Grandson.vue成为Child.vue的子组件，在组件Child.vue的script部分，通过import引入Grandson.vue。importGrandsonfrom"../components/Grandson.vue";（3）在组件Child.vue的script部分，给exportdefault添加一个components属性，注册组件Grandson。components:{Grandson},（4）在组件Child.vue的template模板部分，使用组件Grandson.vue。<hr/><Grandson/>由于Child.vue是App.vue的子组件，而Grandson.vue又是Child.vue的子组件，因此Grandson.vue就成了App.vue的孙子组件。（5）为了演示从组件App.vue向Grandson.vue传递数据，在组件App.vue的setup函数中，声明变量student。5511.14provide与inject（6）使用reactive函数，需要引入。在组件App.vue的script部分，通过import引入reactive函数。import{reactive,ref}from"vue";（7）在return部分，将变量student返回出去。

return{isShow,showMsg,student};（8）在组件App.vue的setup函数的return前，使用provide函数向孙子组件Grandson.vue传递数据。provide("student",student);（9）使用provide函数，需要引入。在组件App.vue的script部分，通过import引入provide函数。import{provide,reactive,ref}from"vue";（10）在孙子组件Grandson.vue中，可以通过inject函数来使用这个数据。使用inject函数，需要引入。在组件Grandson.vue的script部分，通过import引入inject函数。import{inject}from"vue";5611.14provide与inject（11）在孙子组件Grandson.vue的script部分的exportdefault里面，先添加一个setup函数。在setup函数中，使用inject函数接收数据，再添加一个return，将变量student返回出去。（11）在组件Grandson.vue的template模板部分，通过文本插值，显示接收的数据。启动项目并通过浏览器访问

5711.15Vue路由Vue.js路由可用来实现根据不同的URL访问不同的内容，从而实现单页面富应用(SPA)。使用Vue.js路由前需要安装vue-router。检查是否安装vue-router打开项目vue3-demo的package.json文件，查看dependencies字段指定的项目运行所依赖的模块。可以看到还没有安装vue-router，需要自己安装。安装vue-router（1）在VisualStudioCode的终端控制台中，输入命令：

npminstallvue-router@4.0.0-beta.13（2）再次打开package.json文件，可见vue-router安装成功。5811.15Vue路由示例（1）在项目src目录下，创建route文件夹，并在route文件夹下创建index.js文件。（2）在index.js文件中，从vue-router中引入createRouter和createWebHistory这两个函数。import{createRouter,createWebHistory}from"vue-router";（3）在项目vue3-demo的components目录下，创建Cart.vue和List.vue两个组件。组件Cart.vue内容：组件List.vue内容：5911.15Vue路由（4）在index.js中，引入Cart.vue和List.vue两个组件，使用createWebHistory函数从哈希模式切换到history模式，再使用createRouter创建路由器，它接受一个对象，history属性值设置为routerHistory，routes属性值是一个数组，用来指定路由匹配列表，每一个路由映射一个组件，最后导出router。（5）修改ma