上一篇文章已经介绍了如何将默认的vue工程文件改写成自己熟悉的工程文件，本篇将讲解vue-router这个前端开发库。
第四阶段：引入vue-router库
什么是vue-router？
vue-router是vue.js系列的一部分，是处理vue工程路由的工具。我个人理解就是处理URL到组件的映射关系，同时也负责处理文件中的链接跳转及相关功能。
如何使用vue-router？
vue-router官网上给出了三种安装方法，分别是CDN引用、npm下载和构建开发版。
- CDN引用
这种方法最简单快捷，非常适合非模块化的前端开发。我们只需要在html页面中引用CDN就可以了：
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
- 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这类库在前端开发中也越来越重要。
网友评论