Angularui路由总是在URL标题中显示我 /＃ /家

我有一个带有Angular-UI框架路由的AngularJS应用程序。我有一些问题，当我访问forum.html页面时，我会得到

mywebsite/＃/home

在标题上，我希望URL为

mywebsite/＃/forum

另一个问题如何摆脱URL标题中的哈希符号(＃(

  app.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
  $stateProvider.state("home",{
            url:"home",
            views:{
                'main':{templateUrl:"index.html"}
            }
        })
     .state("forum",{
            url:"forum",
            views:{
                'main3':{templateUrl:"forum.html"}
            }
        });
        $locationProvider.hashPrefix('');
         $urlRouterProvider.otherwise("/home");
         }); 
       <div class="container" style="margin-top: 60px">
       <div ui-view="main"></div>
       <div ui-view="main3"></div>
       </div>

forum.html

<div>
<div class="tab-content">
<div ui-view="main3"></div>
 forum 
</div>
</div>

url，请更改：

url:"home"
url:"forum"

to：

url:"/home"
url:"/forum"

要删除＃标志，请使用以下代码：

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

并添加以下内容：

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

根据您的评论，这里附有最低版本的代码：

app.js

var app = angular.module("app", ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
  var homeState = {
    name: 'home',
    views: {
        'main': {
          template: "<p> home</p>"
        }
      }
  }
  var storeState = {
    name: 'store',
    views: {
        'main': {
          template: "<p> Store</p>"
        }
      }
  }
  $stateProvider.state(homeState);
  $stateProvider.state(storeState);
  $urlRouterProvider.otherwise("/home");
});

index.html

<html>
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
         <script src="app.js"></script>
         <style>.active { color: red; font-weight: bold; }</style>
         <base href="/">
    </head>
<body data-spy="scroll"  data-offset="53"    ng-app="app" style="background-image:url('silver.jpg')">
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:#84b1f9;">
    <div class="navbar-header" style="box-shadow: 0px 0px 3px white">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#c1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="c1">
        <ul class="nav navbar-nav">
            <li><a ui-sref="home" ui-sref-active="active" style="background-color:#84b1f9; color:black;" >Home</a></li>
            <li><a ui-sref="store" ui-sref-active="active" style="color:black;">Store</a></li>
        </ul>
        <p class="navbar-text" style="color: #ec971f"> </p>
    </div>
</nav>

    <div ui-view="main"></div>
</body>
</html>

相关内容

最新更新

热门标签：