Nie można usunąć poprzedniego hashtag Aurelia

Wpadłem w problem, którego nie mogę rozwiązać. Powinno być możliwe usunięcie poprzedzającego hashtagu na trasach, wykonując kroki podane w RouterConfiguration -> Options-> Push State.Nie można usunąć poprzedniego hashtag Aurelia

Wykonałem wszystkie te czynności, patrz poniższy kod.

Opcje app.ts RouterConfiguration

public configureRouter(config: RouterConfiguration, router: Router) { 
    config.options.pushState = true; 
    config.options.root = '/'; 
    config.map([ 
     { 
      route: 'login', 
      name: 'login', 
      moduleId: 'pages/auth/login', 
      nav: false, 
      title: 'Login', 
      settings: { 
       allow_anonymous: true 
      } 
     } 
    ]); 
    ...

głowa index.html

<head> 
    <meta charset="utf-8"> 
    <base href="/"> 
    ...

config.js

System.config({ 
    baseURL: "/", 
    ...

Moja trasa logowania działa tylko przy użyciu localhost:9000/#/login, natomiast nie można znaleźć localhost:9000/login. Próbowałem również wdrożyć to w świeżej aplikacji szkieletowej JSPM Aurelia bezskutecznie ...

Każdy pomysł, dlaczego tak się dzieje i co mogę robić źle?

Źródło

2017-08-24 Bryandh

Skieruję kogoś z zespołu routera, aby to obejrzał. –

To, co pokazujesz, działa mi dobrze przez długi czas, czy możesz wypchnąć repro ze świeżym szkieletem, o którym wspomniałeś? –

@PWKadam na pewno, tutaj jest świeże repozytorium szkieletu JSPM Aurelia => https://github.com/bryandh/aurelia-routing-no-hash Trasa powitalna działa tylko po wpisaniu 'localhost: 9000/#/welcome' . Trasa zostanie następnie wizualnie zmieniona na 'localhost: 9000/welcome', ale kiedy fizycznie odświeżę tę stronę/trasę lub ręcznie przejdę do adresu URL, trasa nie zostanie odnaleziona. – Bryandh

configureRouter() Dla BrowserSync (jak opisano przez @Bryandh), trzeba go skonfigurować, aby zawsze Przenieś się swoją index.html . W zależności od projektu może istnieć jakiś plik zadań (np. Zadanie obsługi Gulp, które jest używane w całym Aurelia), które należy zmienić.

Jako przykład wziąłem projekt nawigacji szkieletowej Aurelii. Ma podkatalog skeleton-esnext, który używa Gulp i JSPM do uruchomienia aplikacji. W pliku build/tasks/serve.js jest serve zadaniem, które należy dostosować w następujący sposób:

var historyFallback = require('connect-history-api-fallback'); 

gulp.task('serve', ['build'], function(done) { 
    browserSync({ 
    online: false, 
    open: false, 
    port: 9000, 
    server: { 
     baseDir: ['.'], 
     middleware: [function(req, res, next) { 
     res.setHeader('Access-Control-Allow-Origin', '*'); 
     next(); 
     }, historyFallback()] 
    } 
    }, done); 
});

Ważną częścią jest historyFallback() middleware. Jest to dostarczane automatycznie przez BrowserSync. Jeśli teraz obsługujesz swoją aplikację z tym zadaniem (gulp serve lub gulp watch), możesz uzyskać bezpośredni dostęp do swoich tras, np. http://localhost:9000/users.Nie będzie więcej 404, jak zostaniesz skierowany na index.html, który uruchamia Aurelia i obsługuje trasę /users.

Źródło

2017-08-31 11:58:00

Wielkie dzięki, działa to jak urok! Nie miałem absolutnie pojęcia, że mogę to zrobić, doceniam twój wysiłek! – Bryandh

Dla moich widoków, które są dynamicznie ładowane do kontenera widoku routera, z indeksem jako rootem, udało mi się uzyskać adresy URL mojego projektu, które wyglądają jak poniżej (co, jak sądzę, jest tym, o co prosisz) :

http://localhost:2112/
http://localhost:2112/jobs
http://localhost:2112/discussion

nie trzeba zmieniać jak najwięcej kod jak dzielić d, aby to zadziałało. Pierwszą rzeczą, którą zrobiłem, było ustanowienie referencji bazowej w moim głównym pliku html. Dla mnie był to index.html.

<base href="/" />

Potem ustawić stan Push do true wewnątrz metody

configureRouter(config, route) { 
    ... 
    config.options.pushState = true; 
    ... 
}

Źródło

2017-08-25 22:54:12 8protons

To jest dokładnie to, co opisałem w moim pytaniu, więc to niestety nie pomaga mi dalej. – Bryandh

@Bryandh Ta odpowiedź nie jest "dokładnie taka jak [opisana] w [twoim] pytaniu". Masz nieistotne kroki - napisałem tylko dwie linie kodu, aby to zadziałało. Zmieniłeś znacznie więcej niż dwie linie, w tym zmianę 'config.js', co może być przyczyną problemu. Radziłbym zacząć od nowa i dosłownie zrobić to, co sugeruje moja odpowiedź. Powodzenia. – 8protons

Nie można usunąć poprzedniego hashtag Aurelia

Odpowiedz

Powiązane problemy