3.2.3 启动路由器

在 main.js 入口文件中启用该路由器。main.js 作为入口文件，使用 import 可以把所有要用到的包都导入到这里，然后在 Vue 项目中去运用它们。创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能，具体如示例 2 所示。

示例2

经过示例 2 的配置之后，路由匹配到的组件将会渲染到 App.vue 的 ＜router-view></router-view>，App.vue 里应该这样写，如示例 3 所示。

示例3

<template>
  <div id="app">
    <router-view></router-view>
    <hzh-loading></hzh-loading>
    <hzh-footer>陈兰英</hzh-footer>
    <hzh-header>黄子涵</hzh-header>
    <hzh-main>黄春钦、佘佳梓</hzh-main>
  </div>
</template>

最后 App.vue 会渲染到 index.html，代码如示例 4 所示 。

示例4

这样就会把渲染出来的页面挂载到 id 为 app 的 div 里了。

经验

要理清楚组件渲染的过程，是如何一步一步显示出来的，这个过程很重要，理清这个过程对以后的项目开发很有帮助。