Heim > Fragen und Antworten > Hauptteil
这是我的路由:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
这是我的html
代码:
1 |
|
href
属性的开头是个#
号,当带着这个#
号的时候,路由是正常工作的。如果去掉#
号,路由就找不到路径了:
1 |
|
当我使用vuejs
和vue-router
的时候,这是我的路由:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
这是html
:
1 |
|
同样的,带着#
号路由正常工作,去掉就:
1 |
|
为什么会这样?这个#
号到底有什么作用?
为什么http://localhost:8000/phones/motorola-xoom
就不能识别,http://localhost:8000/app/index.html#/phones/motorola-xoom
就能识别出来?
ringa_lee2017-05-15 17:01:24
Web App 中需要通过URL 标识不同状态,不同状态对应不同URL 既方便前进后退,也方便保存书签。
不过Web App 中为保证用户体验,页面状态的转换一般是不刷新页面的,这往往通过ajax实现。
传统的ajax不会影响地址栏(请求通过XHR对象完成,而不是请求新URL),那如果你想让URL对应不同的页面状态怎么办?windows.location
之类的方法是会刷新整个页面的。
这就需要用到传统的#
了。锚点这东西本来是让你在当前页面的不同部分移动的,支持前进后退和保存书签,于是就被拿来应用在Web App的路由中。这样www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示两个状态,而且转换不会刷新页面。
新的History API可以把#
去掉,不过需要服务器提供一份fallback版本,这里就不细说了。
巴扎黑2017-05-15 17:01:24
先学习一下前端路由的基本知识,onHashChange, pushState 这些最基本的东西,甚至自己写一个小规模的路由,再去用!
即使你不学,请认真完整的阅读官方文档,官方例子写得很明白!
高洛峰2017-05-15 17:01:24
1 2 3 4 |
|
vue配置路由模式为html5模式 ,官方文档里有提到 但是没说怎么写
巴扎黑2017-05-15 17:01:24
这是前端实现路由的方式,#后面也就是所谓的hash,其实类似锚点,你所想的那种是path,是需要后端配合的,至于pushstate之类就是为了体验更好,可以后退前进。