路由可以让用户在访问某个特定地址的时候，显示应用里的某个特定的组件。在 Vue 应用里使用路由功能，需要安装一个包，先打开项目根目录下的 package.json ，在 dependencies 里面，可以添加一个新的依赖，名字叫 vue-router，设置一下这个包的版本，向上的小箭头，4.0.0-0 。

保存一下这个文件，回到终端，可以执行一下 yarn ，或者 npm install ，安装一下项目依赖的东西。安装完成以后，我们就可以使用 vue-router 这个包提供的功能了。

在 src/app 的下面，新建一个文件，名字叫 app.router.ts，在这个文件里可以定义并且导出一个路由器。先创建一下路由器，起个名字叫 router，它的值用一下 createRouter 这个方法，这个方法来自 vue-router，这里编辑器帮我们自动导入了这个方法。

给这个方法提供一个对象参数，需要一个 history 属性，它的值用一下 createWebHistory 这个函数生成，你可以给这个函数一个基本地址参数，暂时我们先不设置这个参数。

下面还需要一个 routes ，这个 routes 属性里的东西就是定义的一些路由。 最后可以导出创建的这个 router，让它作为这个模块的默认的导出。

然后在上面，需要再去创建 routes 属性的值，也就是要定义的一些路由。名字叫 routes，然后设置一下它的类型，它是一个 Array，也就是数组，数组里的项目的类型是 RouteRecordRaw，这个东西也来自 vue-router 。

先让 routes 的值等于一个空白的数组。后面我们会在里面定义一些路由。

创建了这个路由器以后，需要在 Vue 应用里用一下，打开应用的入口，main.ts ，在文件的顶部 ，导入 appRouter ，来自当前目录 app 下面的 app-router。

然后在创建了应用的下面，可以设置在应用里使用这个路由器。用的是 app 上面提供的 use 这个方法，把 appRouter 交给这个方法。

这样我们就配置好了 Vue 应用里的路由器。