AngularJS多级路由重载问题答案

【问题标题】：AngularJS multilevel routing reload issueAngularJS多级路由重载问题
【发布时间】：2014-11-02 20:13:37
【问题描述】：

我正在使用为 SEO 友好的 URL 启用 HTML5 模式的 AngularJs，它在应用内导航但重新加载时工作正常。

在.htaccess 下写过，但嵌套导航仍然面临同样的问题

RewriteEngine On
RewriteBase /akv/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpeg|gif|)
RewriteRule (.*) index.html [L]

对于base/Blog 或base/Portfolio 但base/Blog/MyBlogTitle/type/post/id/1 之类的第一级导航，它工作正常

有什么办法可以解决。

提前致谢。

【问题讨论】：

您遇到什么错误？为什么你有 RewriteBase /akv/ 以及 DocumentRoot 下有多少个 .htaccess 文件？
我在 Root 中只有一个 .httaccess 文件，akv 是为开发目的而创建的子文件夹，其中包含所有源代码。没有这样的错误，但是像 css 和 js 这样的资源正试图从像 base/akv/Blogs/SampleTitle/type/category/id/css/style.css 的 url 加载
还是不清楚。您在这里面临的确切错误是什么。我不明白你的意思 它适用于基础/博客或基础/投资组合等第一级导航，但基础/博客/MyBlogTitle/type/post/id/1 没有@987654328 @ 在base/Blog/MyBlogTitle/type/post/id/1 网址中。
/akv/ 是 base 的一部分
好的！这是情况当我打开 URL ashokvishwakarma.in/akv/Blogs, ashokvishwakarma.in/akv/Portfolio ashokvishwakarma.in/akv 它从ashokvishwakarma.in/akvlko/css/cssfile.css, ashokvishwakarma.in/akvlko/js/jsfile.js ashokvishwakarma.in/akvlko/img/image.png 加载资源但是当我打开页面ashokvishwakarma.in/akv/Blogs/BlogTitle/type/post/id/10 它开始从ashokvishwakarma.in/akv/Blogs/BlogTitle/type/post/id/css/cssfile.css 加载资源等等。

标签： angularjs .htaccess url-rewriting angularjs-routing

【解决方案1】：

问题是您在 css/image/js 路径中使用了相对 URL。相对 URL 在浏览器将它们添加到当前路径时被解析，因此在使用漂亮 URL 时会为您提供 404。

要解决此问题，您可以将其添加到页面的 HTML <head> 部分：

<base href="/kv/" />

这样每个相对 URL 都是从该 URL 而非当前页面的 URL 解析的。

【讨论】：