接上文：vue实战——自定义基础路径，端口号，继续我们的实战项目讲解之旅。本文讲解vue核心插件——vue router。
在本项目中，使用了vue-cli3.10创建的，所以默认带了router，那么，这个router是怎么被vue使用的呢？任何插件首先得需要安装。
1.安装
npm install vue-router
然后我们在package.json中会发现router已经被依赖进来了。那么怎么引用呢？在单独的模块中使用：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
比如本项目中的文件在：
然后，我们在main.js中对router进行引用挂载
它挂载到了app这个元素上了，我们知道这个app就是我们项目整体的根元素。因此以后我们就可以在页面上进行路由配置了。
那么，在页面上，是如何进行路由的呢，我们用：
<router-link to="/xxx">Go to xxx</router-link>
同时在上图的路由文件中配置对应的xxx来进行路由导航。举个栗子：
我们的默认首页是App.vue：
我们在id=“nav"里加一个：
<router-link to="/newAbout">newAbout</router-link>
如图：
在router的index.js文件里加：
{
path: '/newAbout',
name: 'newAbout',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
如图(注意，这里是json格式，连接的逗号不要忘记)：
启动项目
npm run dev
发现首页上多了个导航：
以后，我们会根据这个方法添加属于我们自己的导航菜单。
接下来，我们详细多说说这个路由，我们发现路由页面的下面配置了一个：
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
这个代码，那么这个是什么意思呢？这个配置，说明了我们的路由采用的是HTML5 History 模式。这个模式是什么时候创建的呢？还记得我们用vue-cli3创建项目吗？对，就是在那时候创建的。Vue使用vue-cli 3.10.0创建项目
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
大家注意到了吗，上面的base的值，就是我们之前文章说的自定义的环境变量。感兴趣的同学，可以看我的之前的文章。有了base路径，在跳转的时候，就会自动加上这个路径了。
然后我们再看下routes里的内容：
那么，这些配置是什么意思呢？下篇文章我们继续分享。
原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文档，喜欢的朋友欢迎关注。