我正在使用Yii2和AngularJS。我必须拨打关于我们的不同页面，联系我们等。但我的漂亮网址不能正常工作。我需要像这样的PrettyUrl：
localhost/angularjsyii/frontend/web/site/#/login
当前无效的网址：localhost/angularjsyii/frontend/web/site#!/#%2Flogin
RewriteEngine on
# If a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Otherwise forward it to index.php
RewriteRule . index.php
<navbar>） <?php
use frontend\assets\AppAsset;
/* @var $this \yii\web\View */
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" ng-app="app">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Angular Yii Application</title>
<?php $this->head() ?>
<script>paceOptions = {ajax: {trackMethods: ['GET', 'POST']}};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/red/pace-theme-minimal.css" rel="stylesheet" />
<a base href="/angularjsyii/frontend/web/"></a>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<nav class="navbar-inverse navbar-fixed-top navbar" role="navigation" bs-navbar>
<div class="container">
<div class="navbar-header">
<button ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a class="navbar-brand" href="/angularjsyii/frontend/web/site/index">My Company</a>
</div>
<div ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true" class="collapse navbar-collapse" >
<ul class="navbar-nav navbar-right nav">
<li data-match-route="/">
<a href="/">Home</a>
</li>
<li data-match-route="/about">
<a href="/about">About</a>
</li>
<li data-match-route="/contact">
<a href="/contact">Contact</a>
</li>
<li data-match-route="/login">
<a href="/login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right"><?= Yii::powered() ?> <?= Yii::getVersion() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
'use strict';
var app = angular.module('app', [
'ngRoute', //$routeProvider
'mgcrea.ngStrap'//bs-navbar, data-match-route directives
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/index.html'
}).
when('/about', {
templateUrl: 'partials/about.html'
}).
when('/contact', {
templateUrl: 'partials/contact.html'
}).
when('/login', {
templateUrl: 'partials/login.html'
}).
otherwise({
templateUrl: 'partials/404.html'
});
}
])
;
'urlManager' => [
'class' => 'yii\web\UrlManager',
// Disable index.php
'showScriptName' => false,
// Disable r= routes
'enablePrettyUrl' => true,
],
答案 0 :(得分：1)
您应该在AngularJS中启用HTML5模式以禁用路由中的hashPrefix !。
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'partials/index.html'
}).
when('/about', {
templateUrl: 'partials/about.html'
}).
when('/contact', {
templateUrl: 'partials/contact.html'
}).
when('/login', {
templateUrl: 'partials/login.html'
}).
otherwise({
templateUrl: 'partials/404.html'
});
}
]);
阅读AngularJS的$location documentation：
相关链接
务必检查所有相关链接，图像，脚本等。您必须 要么在主html文件（
<base href="/my-base">）的头部指定url base，要么必须使用绝对URL（从/开始） 无处不在，因为相对网址将被解析为绝对网址 使用文档的初始绝对URL，这通常是 与应用程序的根目录不同。
在你的情况下，基础href应该是这样的<a base href="/angularjsyii/frontend/web/site">。现在，您的网址上不再需要#了。改变您的路线，如：
<li data-match-route="/login">
<a href="/login">Login</a>
</li>
网址最终应该是：localhost/angularjsyii/frontend/web/site/login更漂亮。