Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

单页面应用中的路由跳转 #33

Open
kangschampagne opened this issue Apr 17, 2018 · 0 comments
Open

单页面应用中的路由跳转 #33

kangschampagne opened this issue Apr 17, 2018 · 0 comments

Comments

@kangschampagne
Copy link
Owner

@kangschampagne kangschampagne commented Apr 17, 2018

在单页面应用中,非常常见的就是路由的跳转,大部分情况下,我们都会使用相应的库,比如 Vue 使用 Vue-router 等。
探究其原理和方式,不过通过两种方式进行,一个是使用 hash 模式,通过监听 onhashchange;另一个则是使用 History Api 进行操作。

// 这里先预留两种方法 手打的实现方法。之前实现过。

通过例子可以很清楚的看到原理,这边依旧总结一下。
hash 模式:其优势就是兼容性好,更像是 hack 的方式进行路由的跳转监控。
HTML5 History API 模式:浏览器提供方法属性,易读方便。

其两者的相同点在于,它们都是单纯的更改了 URL 地址,没有刷新页面的话,都不会主动向后台发送请求。不同点在于当页面刷新的时候,History 模式会向后台发送整个 URL 请求,而 hash 只会请求后台的根目录。

我们在使用 Vue 开发单页面应用的时候,vue-router 默认为 hash 模式,因此可以看到 url 的显示为 http://localhost:8080/#/,这个地方多了一个 # 号,去除这个符号的方法就是,使用 vue-router 的 history 模式。

但是这个地方有个需要注意的地方,为这两种模式的不同点设定下面情况:

  1. 如果当前是 SPA 并使用 histroy mode,假如用户访问了一个地址为 http://xxx.com/name/id 的网页路径,但是这个路径并没有页面。
    用户得到的页面就是 404 错误页面。因此后台需要对这种情况进行配置,即在服务端增加一个覆盖所有情况的候选资源,如 url 匹配不到任何静态的资源,那么应该返回 app 的依赖页面,或者自定义的 404 页面,来实现 fallback。当然也可以在前台配置相同的 routers 内容。

  2. 如果当前是 SPA 并使用 hash mode,假如用户访问了一个地址为 http://xxx.com/#/name/id 的网页路径,但是这个路径并没有页面。
    后台即使没有做路由全覆盖,也不会返回 404,因为请求的地址为app 依赖页面,hash 符号之后的内容不会包含在请求中。那么后台如何识别当前刷新的路由地址呢?笔者的思路是前台 app 依赖页做 router 的拦截器验证,跳转路由并重新请求后台数据。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.