vue-router 给 Vue 应用提供了路由的功能。之前在创建 Vue 项目的时候，我们选择使用了 vue-router，在项目的 package.json 里面，你会发现，vue-router 已经作为我们项目的依赖了。

有了这个包以后，我们就可以给应用添加路由的功能了，路由可以决定在访问某个地址的时候，通向应用的某个具体的地方。

比如在这个默认的 Vue 应用里面，最上面有两个链接，当前打开的是 Home，点一下它旁边的 About，页面上会显示 About 组件的内容。注意浏览器的地址，现在变成了 /about 。

在项目的 src/router 目录下的 index.ts 文件里，定义了两条路由。创建路由用的是 createRouter 这个函数，先从 vue-router 这个包里面，导入 createRouter，执行它会得到一个 router，文件的最后会导出创建的这个 router。

在 main.ts 里面创建 Vue 应用的时候，导入使用了这个 router。

再回到定义 router 这个文件。具体定义的路由可以交给 routes 这个属性，在上面定义了一个 routes，因为我们在项目里用了 TypeScript，所以在后面描述了一下这个 routes 的类型，它是一个 Array 类型的数据，也就是一个数组，这个数组里的项目的类型是 RouteRecordRaw 。

每条路由都是一个对象，里面可以用 path 设置一下路由的地址，只有一条斜线，就表示应用的根，也就是应用的首页。name 属性设置的是路由的名字，这条路由是 Home，访问这个路由地址打开的组件，可以交给 component 属性，这里就是 Home 这个组件。

在这个文件的上面，我们得先导入 Home 这个组件。

下面又是一条路由，这个路由的地址是 /about，名字是 About，注意这条路由的 component 属性的值，我们用了一个函数，函数返回的是导入的组件。

这种写法可以做到代码分割，如果不这样做的话，应用的代码可能会放在一个 js 文件，但是这里用了这种写法，就会单独把 About 这个组件分割开，也就是用户在访问 /about 这个地址的时候，才会下载这部分代码。

这里我们可以到浏览器上测试一下，回到浏览器，打开应用以后，再打开浏览器的开发者工具，然后打开 Network 选项卡。过滤出 JS，然后刷新一下应用的页面，你会发现，这里下载了几个 js 文件，再点击打开 About， 这里会显示下载了 about.js。

如果定义 About 这条路由的时候，用的是 Home 这条路由的写法，这样的话 About 这个组件的代码跟 Home 组件的代码会放在一个 js 文件里，不会分割开。

也就是访问任何一个地址都会下载到应用的所有的代码。

打开 src 下面的 App.vue， 你会发现，在这个组件的模板里面，用了两个 router-link，在它的 to 属性里面可以设置一下要打开的路由地址。现在应用里有两条路由，一个地址是 /，另一个地址是 /about。

访问 / 的时候，显示的是 Home 组件里的内容，访问 /about 这个地址的时候，显示的是 About 组件的内容。这些在路由里设置的要打开的组件内容，会在这个 App 组件的 router-view 这里显示。

如果我们去掉这个 router-view 组件，保存一下文件，再回到浏览器预览一下，你会发现，页面上除了两个链接以外，就没有别的东西了。因为没有设置要显示路由组件的地方，所以这里要使用 router-view 组件。