vue-Router und Paginierung Links

Question

Ich habe einfach Paginierung für die Suchergebnisse:

<ul class="pagination" v-if="lastPage > 1"> 
    <li v-for="pageNumber in lastPage"> 
     <router-link :to="{params: {page: pageNumber}}">${pageNumber}</router-link> 
    </li> 
</ul> 

Und ich versuche es mit vue-Router zu integrieren. Es ist mein Router Beispiel:

const router = new VueRouter({ 
    history: true, 
    routes: [ 
     { path: '/:producent/:type/page/:page' }, 
     { path: '/:producent/page/:page' } 
    ] 
}) 

So würde Ich mag Urls haben: /mercedes/sedan oder nur /mercedes für 1-ten Seite der Ergebnisse und /mercedes/sedan/page/x oder /mercedes/page/x für andere.

In diesem Moment funktionieren meine Links und werden nur ordnungsgemäß erzeugt, wenn ich URL /mercedes/sedan/page/1 öffne. Wenn ich /mercedes/sedan öffne, sind alle meine Router Links auch /mercedes/sedan

Wie es zu beheben?

Answer 1

Ich fand eine Lösung. Ich denke, es ist nicht elegant, aber funktioniert ... Ich überprüfe URL /page/ Zeichenfolge, und dann füge ich einfach params (wenn wahr) oder ich füge es in den Router-Pfad.

<router-link :to="{params: {page: pageNumber}}" v-if="$route.path.indexOf('/page/') >= 0">${pageNumber}</router-link> 
<router-link :to="{path: $route.path.replace(/\/$/, '') + '/page/' + pageNumber}" v-else>${pageNumber}</router-link>