亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

如何開啟單頁應用的 H5 路由模式

標簽:
Html5

单页应用经常会采用 url 的 hash(锚点) 来实现路由机制,当然这种方式的确是一个有效的方式,但是在很多人会对 url 出现 hash 产生不好的感觉。H5 history 新 API 的出现,让浏览器地址栏的 url 改变而不刷新页面。

像 Angular 这样的框架,内部已经实现了 H5 模式的路由方式,只需要在 config 中设置 $locationProvider.html5Mode(true) 即可完成 url 变化而不会刷新页面。但是会存在一个问题,当路由到某一个页面时,由于本身没有这个页面,导致刷新浏览器去访问这个 url 时出现找不到该页面的错误。

当然,这种问题我们可以通过 Nginx 将 404 状态的路由都转发到首页,这样就解决了刷新找不到页面的问题。

解决步骤:

修改 Angular 应用的路由为 H5 模式:

var app = angular.module("app", [...]);
app.config(["$locationProvider", function($locationProvider){
    $locationProvider.html5Mode(true);
    ...
}]);

在页面中增加 base url

<html>    <head>
        <base href="/" />
    </head></html>

将 Angular 应用中的所有内部跳转改为 Angular 封装好的跳转:

  • 页面上的链接跳转采用 ng-ref

  • 如果采用第三方 ui-router 的话,页面链接跳转采用:ui-sref

  • 模块内部的跳转采用 $state.go,例如在 Controller 中跳转;

配置 Nginx 将 404 状态的路由都转发到首页:

location / {
    root   /path;
    index  index.html index.htm;    
    # 注意,‘ =404’ 前面必须有空格!
    try_files $uri $uri/ /index.html =404;
}

这样一来,Angular 单页应用就可以去除 # 并且每个路由都可以直接进入正确的页面。再加上 Prerender 服务,会让网站的 SEO 更佳友好。

最后

当然这样的技巧我们也可以用在当前流行的前端框架,例如:Vue、React 等。当然 Prerender 技术相对挪活,现在的前端框架已经支持了 SSR(服务器端渲染)技术。良好的利用 Nginx 对我们的网站系统有非常好的帮助。





點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
12
獲贊與收藏
135

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消