Vue Day3之Vue-router

1、简介
单页面:根据不同的url地址,显示不同的内容,但显示在同一个界面。
2、基本用法
给大家一个小的demo,上边有解释。
eg:


js代码.png
布局代码.png
运行结果(1).png

运行结果.png

2.浅谈hash值
其中大家看运行结果后面有个#,跟上你跳转之后的页面,这里有个东西叫做HASH,也叫做哈希值,
对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义。前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求。
一、为了达到这个目的,浏览器提供了以下两种支持:
hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算)。
比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。
history模式,会出现404 的情况,需要后台配置。
二、404 错误
hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
history模式下,前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。
以上这些是Vue-router的简单用法......

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 相遇。 滴滴滴滴~(电话铃声) 喂 你好。 (酒吧老板):你好 你是苏溢嘛?我是夜蒲...
    雨子衿阅读 2,118评论 0 1
  • 21天习惯养成,D5D6,早起,早上7点起床,未完成! 100天读33本书计划,D5D6,晨间1个番茄钟,完成!今...
    寻糖糖阅读 1,625评论 0 0
  • 学习语言是世界上Jason老师最喜欢的事情。作为一个英语教师和研究人员,这是我的激情,我的爱好和我的生活。 但是最...
    JasonEnglish阅读 1,690评论 0 0
  • 一句无心的话, 却得罪了一个有心的人; 一次背叛,却落寒心失信。 错选一回,却是天囊之别的结果。 一次全力以赴, ...
    尘者阅读 2,047评论 0 0
  • 1、过程重要还是结果重要?我们到底该如何看待过程和结果的关系呢? 过程和结果同样重要,认真努力并达到预期效果,是一...
    朱欣欣1987阅读 876评论 0 0