Question

我正在尝试在Ionic 2中实现导航。我尝试使用DeepLinking并获得结果，但是'＃'符号正在URL中。当'＃'符号出现在URL中时，Google Analytic将无法识别该网站，这就是为什么我尝试以不同的方式实现导航，例如Angular 2 Routing，它同时支持（HTML5或散列URL样式），但无法实现离子2.

前 - http://localhost:8100/#/registration - 这个工作正常，但我没有'＃'。像http://localhost:8100/registration

一样

感谢您的帮助

Answer 1

我为@ ionic / app-scripts 3.2.5设置了PR，以解决此问题： https://github.com/ionic-team/ionic-app-scripts/pull/1545

同时，您可以编辑一些项目和依赖文件以启用它：

src / app / app.module.ts：

        IonicModule.forRoot(MyApp,
        {
            locationStrategy: 'path'
        },
        {
            links: [
                { component: RegistrationPage, name: 'registration', segment: 'registration' },
                { component: LoginPage, name: 'login', segment: 'login' },
                { component: HomePage, name: 'home', segment: '' }
            ]
        })

src / index.html：

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

node_modules/@ionic/app-scripts/dist/dev-server/http-server.js：

function createHttpServer(config) {
    var app = express();
    app.set('serveConfig', config);
    app.get('/', serveIndex);
    app.use('/', express.static(config.wwwDir));
    app.use("/" + serve_config_1.LOGGER_DIR, express.static(path.join(__dirname, '..', '..', 'bin'), { maxAge: 31536000 }));
    // Lab routes
    app.use(serve_config_1.IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
    app.get(serve_config_1.IONIC_LAB_URL, lab_1.LabAppView);
    app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/cordova', lab_1.ApiCordovaProject);
    app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/app-config', lab_1.ApiPackageJson);
    app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
    app.get('/cordova_plugins.js', servePlatformResource);
    app.get('/plugins/*', servePlatformResource);
    if (config.useProxy) {
        setupProxies(app);
    }
    app.all('/*', serveIndex);
    return app;
}

第app.all('/*', serveIndex);行将把任何404文件或目录未找到的错误重定向到index.html。然后，在这种情况下，locationStrategy：'path'设置可以与深层链接和重定向一起正常使用。

Answer 2

尝试使用pathLocationStrategy而不是HashLocationStrategy。

在app.module.ts中添加此内容

import { LocationStrategy,
         PathLocationStrategy } from '@angular/common';

...

@NgModule({
...
providers: [
{
   provide: LocationStrategy,
   useClass: PathLocationStrategy
},
...

或其他方式是

   IonicModule.forRoot(MyApp, {
        locationStrategy: 'path'
    })

确保有一个有效的基础href。

Answer 3

以下是我所做的事情清单。希望这会有所帮助。

我们需要删除每个网址路径中的＃，因为Google Analytics会拒绝带有＃的网址。在App Module中，将{locationStrategy：'path'}添加到您的App Module，如下所示：
```
IonicModule.forRoot(MyApp, {
  locationStrategy: 'path'
})
```

2.Now＃从网址中删除。但是当你刷新或直接访问url时，这不会起作用，因为这是任何SPA的预期行为。刷新页面时，服务器尝试在上述位置查找页面。正如@Parth Ghiya上面所说的那样：例如：如果你点击localhost / abc，那么服务器试图找到实际上不存在的abc / index.html。为了解决这个问题，你在我的服务器上编写了配置，即指向每一个请求index.html。我正在使用node express服务器来部署应用程序。使用以下代码将每个请求路由到index.html -

var express = require('express');
var path = require('path')
var app = express();
app.use(express.static(path.resolve(__dirname, "www")));

app.use('/*', function(req, res){
   res.sendFile(__dirname+ '/www' + '/index.html');
});

app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
  console.log("listening to Port", app.get("port"));
});

如何克服“＃”，通过Ionic 2中的DeepLinking进入URL？

3 个答案: