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

本文来自企鹅号 - 你吖才码农媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端大白专栏

服务器端渲染和客户端渲染

33550
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯 TMQ】零基础学习 Fiddler 抓包改包

Fiddler 是一款 HTTP 协议调试代理工具,它能够抓取记录本机所有 HTTP(S) 请求,通过设置断点等方法我们可以任意修改进出 Fiddler 的数据...

1.9K00
来自专栏木子昭的博客

macOS Serria安装配置QT5.5

最近比较迷C++,打算用qt写一个带界面的小游戏. 在deepin应用商店一键安装qt, 没有出现任何问题(点赞deepin!),但在Mac安装qt的时候遇...

39540
来自专栏happyJared

Fiddler实现微信授权开发调试

案发现场: 某天,一名正儿八经的开发"猿",在疯狂一顿Coding之后,他完成了微信授权登录功能的编码。下来他想先在本地调试一下,然后再部署到线上环境。于是在...

67920
来自专栏Jerry的SAP技术分享

Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信?

40330
来自专栏前端知识分享

Bootstrap中datetimepicker日期控件1899年问题解决

  最近在开发项目的过程中,遇到一个很尴尬的问题。我们项目一直采用的是angular+bootstrap,日期控件用的是bootstrap中的datetimep...

26940
来自专栏极乐技术社区

微信小程序跳坑指南系列《一》:新坑30枚

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。 2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更...

266100
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板发布 3.6 版本

37040
来自专栏yang0range

React Native在Android当中实践(五)——常见问题

这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行...

14520
来自专栏Samego开发资源

自动化运维之ansible

27570

扫码关注云+社区

领取腾讯云代金券