Fatal编程技术网
  • url-rewriting/
  • Url rewriting 角度2：直接调用URL不起作用

Url rewriting 角度2：直接调用URL不起作用

url-rewriting angular

Url rewriting 角度2：直接调用URL不起作用,url-rewriting,angular,angular-ui-router,Url Rewriting,Angular,Angular Ui Router,我创建了一个小的angular 2示例应用程序，在这里我可以演示一个路由问题。我定义了以下路线： @RouteConfig([ { path: "/login", name: "Login", component: Login }, { path: "/sites/site1", name: "Site1", component: Site1 } ]) 使用以下说明导航到Site1： this.router.navigate(["Site1", {}]); 如果我直接从浏览器

我创建了一个小的angular 2示例应用程序，在这里我可以演示一个路由问题。我定义了以下路线：

@RouteConfig([
    { path: "/login", name: "Login", component: Login },
    { path: "/sites/site1", name: "Site1", component: Site1 }
])
使用以下说明导航到Site1：

this.router.navigate(["Site1", {}]);
如果我直接从浏览器调用该站点，则无法正常工作。就我而言，
http://127.0.0.1:8080/static/sites/site1
。但是直接调用登录站点是有效的：
http://127.0.0.1:8080/static/login

注意：在本例中，“/static”是我的基本href

这似乎是因为问题只发生在路径上，路径比一层更深。基本href工作后的第一个站点（例如登录）。呼叫更深的站点不起作用（例如站点）

以下应用程序可能会重现此问题：

  • 克隆存储库，安装节点模块并启动应用程序（请参阅入门）
  • 单击“显示站点1”按钮：您可以看到路由工作正常
  • 直接调用url：您可以看到路由不起作用
有什么想法吗

谢谢

我想您应该切换到
HashLocationStrategy

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
默认值为
PathLocationStrategy
（HTML5 pushState），需要服务器支持。

我想您应该切换到
HashLocationStrategy

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
默认值为
PathLocationStrategy
（HTML5 pushState），需要服务器支持。

我认为您的问题出在HTML页面上。您的路径配置错误。尝试按以下方式更改indexDev.html：

<head>
    <meta charset="UTF-8">
    <title>Issue Demostrator</title>
    <base href="/static/" />
    <!-- Bootstrap stuff -->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />

    <!-- Angular2 stuff -->
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="/node_modules/angular2/bundles/router.dev.js"></script>
    <script src="/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="app/systemConfig.js"></script>
    <script type="text/javascript">
        System
            .import("appbuild")
            .catch(console.log.bind(console));
    </script>
</head>


发行Demostrator
系统
.import（“appbuild”）
.catch（console.log.bind（console））；
注意，我在链接之前添加了base标记，并更改了它们的路径

我希望它能帮助您

我认为您的问题出在HTML页面上。您的路径配置错误。尝试按以下方式更改indexDev.html：

<head>
    <meta charset="UTF-8">
    <title>Issue Demostrator</title>
    <base href="/static/" />
    <!-- Bootstrap stuff -->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />

    <!-- Angular2 stuff -->
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="/node_modules/angular2/bundles/router.dev.js"></script>
    <script src="/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="app/systemConfig.js"></script>
    <script type="text/javascript">
        System
            .import("appbuild")
            .catch(console.log.bind(console));
    </script>
</head>


发行Demostrator
系统
.import（“appbuild”）
.catch（console.log.bind（console））；
注意，我在链接之前添加了base标记，并更改了它们的路径

我希望它能帮助您

看起来像是
HashLocationStrategy
将
/pagename
转换为
/#/pagename
。有没有办法让它可以再次导航到
/pagename
？在Angular 1.*中，您可以设置
HTML5模式
，并在
.htaccess
中写几行，以摆脱
#
。不，如果需要，您需要为HTML5 pushState配置服务器。如果它与
HashLocationStrategy
一起工作，您就知道这是问题的原因。
HashLocationStrategy
将
/pagename
转换为
/#/pagename
。有没有办法让它可以再次导航到
/pagename
？在Angular 1.*中，您可以设置
HTML5模式
，并在
.htaccess
中写几行，以摆脱
#
。不，如果需要，您需要为HTML5 pushState配置服务器。如果它与
HashLocationStrategy
配合使用，您就知道这是问题的原因。谢谢，使用base标记它就可以工作。Günter Zöchbauer:HashLocationStrategy也可以使用，但我需要PathLocationStrategy，因为我使用的是OpenId服务器，它将令牌作为散列碎片返回，感谢它使用的基本标记。Günter Zöchbauer:HashLocationStrategy也可以，但我需要PathLocationStrategy，因为我使用的是OpenId服务器，它将令牌作为哈希片段返回