vue-router 路径问题

Question

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

请问，为什么直接访问 http://oursite.com/user/id无法匹配呢？应该怎么才能匹配？

Answer 1

这是因为服务端接管路由,去访问/user/id这个地方,但是实际上应该让服务器把你带到index.html这里,然后vue-router通过分析路径确定你是要访问vue-router的路由,然后给你展现这个路由的页面

如果想更好的理解这个问题,楼主需要了解一些服务端知识和url相关知识

简单描述下,一个正常服务器的情况(虽然不严谨,但是利于理解)

在一个urlhttp://oursite.com/user/id中http:是协议,oursite.com是host,/user/id是path

也就说说如果带着这个url去访问服务端,服务器收到了你的访问之后开始解析路径path,正常情况下服务器就会去找对应这个路径的地址(为了方便理解,你可以类比的理解成找根目录下一个叫user的文件夹下叫id的东西),然后把你的请求返回给你,这种情况可想而知是找不到的或者找到的内容不是用户想要的内容

这个时候,我们就需要去规定服务端如何来解析这个path

vue-router文档上面的对服务器的配置意思是说,只要访问oursite.com这样的一个主机,不论后面的path是怎么样的,我服务器统统不管,全部把链接指向oursite.com/index.html,而这个html就是你vue的首页,接下来执行前端代码,vue-router框架就会分析你的url然后做vue-router相关的事情了.

以上这个过程就是后端放弃路由控制权限,将路由控制权交给前端来处理