这是我参与「第四届青训营 」笔记创作活动的第2天
因为掘金本身也是实使用vue框架来实现的一个单页应用，所以我们在没接触过vue的情况下也尝试着用vue去实现掘金的一个效果，首先第一个问题就是，既然是单页应用，那如何实现像多个页面切换一样的效果呢？这就不得不提到路由了。
由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？
什么是路由？
这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
当我们在一个文件夹下使用终端创建一个vue项目时（前提是要在全局安装好vue.js，可参考vue.js官方文档，有生产版本和开发版本可以选择），会出现一下界面
无论选择vue2还是vue3的版本默认的项目里不包含vue-router（路由），所以我们可以手动配置项目所需要的依赖，选择第三个
用空格键勾选上路由选项，其他根据自己的需求选择即可，这样终端帮我们创建好一个项目的时候，就已经默认帮我们安装好了vue-router的依赖，不需要我们安装，如果选择的是vue2或者vue3的，也只需要在项目文件中打开终端输入指令npm install vue-router --save-dev即可。
如何实现简单的路由跳转？
首先在项目的main.js文件中需要从我们安装的依赖中引入，但是终端会帮我们完成这步工作，效果如下：
首先在项目的src文件中会出现一个router的文件夹，里面默认帮我们放置了一个index.js的文件
首先有两种方式引入路由，一种是import XX from '../views/xx.vue' XX为我们定义的名字，xx为跳转的路由路径，另一种是在component里使用箭头函数引用效果是一样的。
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
在index.js最后会自动帮我们把引入的路由通过export default router抛出，这样我们就可以在App.vue中使用了。
我们的路由跳转都写在
标签里面通过router-link来实现。
<router-link to="/">[显示字段]</router-link>
- to：是我们的导航路径，要填写的是你在
router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成to=”/”， - [显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页。
当我们点击首页中的about就能通过路由显示相应的about的内容
并且我们会发现地址也是在我们原本首页的地址后面拼接了我们写在router/index.js中的路径/about
