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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171218G0ROZ000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券