Question

我创建了一个小角度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

注意：在这种情况下＆＃39; / static＆＃39;是我的基础href。

似乎问题只发生在路径上，路径深度超过一个级别。基本href工作后的第一个站点（例如登录）。调用更深层次的网站（例如网站/网站）。

问题可以通过以下应用重现： https://github.com/lexon0011/IssueDemonstrator

克隆存储库，安装节点模块并启动应用程序（请参阅使用入门）
点击按钮＆＃34;显示站点1＆＃34;：您可以看到路由正常工作
直接调用网址：您可以看到路由无法正常工作

任何想法???

谢谢！

Answer 1

我想你想切换到HashLocationStrategy

bootstrap(AppCmp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

默认为PathLocationStrategy（HTML5 pushState），需要服务器支持。

Answer 2

我认为您的问题位于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>

请注意，我已在您的链接之前添加了 base 标记并更改了其路径。

我希望它可以帮到你

Angular 2：直接调用URL无效

2 个答案: