Question

我的网络应用程序正在开发 example.com ，我想像这样传递一个id example.com/165165

在角度路由器中我们只需要$locationProvider.html5Mode(true)。但我没有使用任何框架或路由器库。是否有任何简单的方法来做角度路由器的工作？

我看过HTML5 History API演示使用history对象并正在监听popstate来观看网址更改。因此，您可以通过https://html5demos.com/history/first中的第一个链接HTML5 History API，但无法直接访问https://html5demos.com/history/first。我想直接访问它。

任何帮助将不胜感激。

Answer 1

首先我们创建像

这样的路线

export function routerConfig ($stateProvider, $urlRouterProvider,$httpProvider, $locationProvider) {
'ngInject';
$stateProvider
.state('example', {
  url: '/example:id',
  templateUrl: 'template path here',
  controller: 'ExampleController',
})

$locationProvider.html5Mode(true);
}

并在标题

中添加index.html <base href="/">

Answer 2

这是示例代码，它使用jQuery来处理某些事情但你可以随时将其转换为纯js

// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
  $('h2 span').html(url || "/");
  $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function(e) {
  e.preventDefault();
  var targetUrl = $(this).attr('href'),
    targetTitle = $(this).attr('title');

  $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);

  window.history.pushState({
    url: "" + targetUrl + ""
  }, targetTitle, targetUrl);
  setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
  $("#menu-nav a").fadeTo('fast', 1.0);
  setCurrentPage(e.state ? e.state.url : null);
};

body {
  margin: 10px
}

h1 {
  font-size: 20px
}

<h1>Navigation Without Refresh <span></span></h1>
<h2>Current Page: <span>/</span></h2>
<ul id="menu-nav">
  <li><a href="/page-1/" title="Pagina 1">Page 1</a></li>
  <li><a href="/page-2/" title="Pagina 2">Page 2</a></li>
  <li><a href="/page-3/" title="Pagina 3">Page 3</a></li>
</ul>

javascript中的html5模式路由

2 个答案: