从无到有搭建Vue.js+webpack前端开发环境（四）

上一篇文章已经介绍了如何将默认的vue工程文件改写成自己熟悉的工程文件，本篇将讲解vue-router这个前端开发库。

第四阶段：引入vue-router库

什么是vue-router？

vue-router是vue.js系列的一部分，是处理vue工程路由的工具。我个人理解就是处理URL到组件的映射关系，同时也负责处理文件中的链接跳转及相关功能。

如何使用vue-router？

vue-router官网上给出了三种安装方法，分别是CDN引用、npm下载和构建开发版。

• CDN引用

这种方法最简单快捷，非常适合非模块化的前端开发。我们只需要在html页面中引用CDN就可以了：

• npm 下载

这种方法就比较适合模块化开发，因为通过npm下载的本身就是模块化的，我们下载好后在工程中直接引用即可：

npm install vue-router

• 构建开发版

这种方法我用的比较少，它是通过下载源码后编译安装的：

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

适合本工程的安装方法？

当然是第二种了，其实之前在用vue-cli初始化工程时已经安装好了vue-router了（如果你选择了安装vue-router的话），在此基础上我们只要稍微修改一下router.js文件让它用起来更顺手。

首先，在Router对象中添加mode字段，设置属性为‘history’，这样我们可以同时使用html5的history API操作路由。

其次，我们再将routes字段的对象分离出去，这样我们就可以单独对这个配置对象操作。同时，我们不再通过import引入组件，直接在箭头函数中require对应组件，这样这种一一对应关系看起来更直观。

修改过后的router.js是这样的：

router.js

到这里，再运行一下npm run dev，如果能正常运行就说明修改成功了。以后我们还会对这个文件继续添加新内容，至于vue-router的用法可以点这里进行查看，本篇不做解释。

路由这个工作原本是后端开发人员负责的，但随着前端技术的发展这项工作已逐渐转向前端。因此vue-router这类库在前端开发中也越来越重要。