8.实战篇_关于前端路由

写在前面的话：有的读者提意见“文字太多，图片太少，不活泼可爱”，我已经尽力了。

1.一张图理解“页面路由”

这就是页面路由，很古老的J2EE开发，一般一个页面路由就对应一个jsp——我菊花厂很多产品就这样。

2.再用两张图理解“前端路由”

在WebAPP的世界里，单页系统比较常见。

单页系统的好处？快、动效多，超不多就这些优势吧。

这样给用户一个困扰，怎么在界面上点了半天，浏览器的地址为啥没变呢？

而且这种困扰通常会误导用户按一下F5，页面就刷新了。。。

于是HTML5推出了一个特性——HistoryAPI，具体是啥不赘述，

总之，浏览器的URL地址会变化了。。。

3.三坨代码，学会实战

STEP1.在Vue的入口函数——main.js,注入router对象

STEP2.在Vue工程中新建router文件夹，编写index.js，用于描述前端路由

新增一个路由，就在这个文件里面加一条

STEP3.封装一个自己产品的路由工具类

例如：获取URL地址的参数

例如：通过API的形式进行API跳转

关键代码就是下图红框标出来的Vue原生API

4.总结

前端路由是Vue实战中第一步要面对的事情，

不要被网上一些看似高大上的文章唬住了，

实战就上述3步常规操作，

照着做，随便浪。

5.代码路径

https://github.com/JHerculesqz/demo-js-vue/blob/master/1.platform/src/main.js

https://github.com/JHerculesqz/demo-js-vue/blob/master/1.platform/src/router/index.js

https://github.com/JHerculesqz/demo-js-vue/blob/master/1.platform/src/walle/component/router/index.js

over