VUE路由器和分页链接

Question

我对搜索结果简单分页：

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

我试着将它与VUE路由器集成。这是我的路由器实例：

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

所以我想有网址：/mercedes/sedan或只是/mercedes对结果的1个页面和/mercedes/sedan/page/x或/mercedes/page/x他人。

在这一刻我的链接工作，并只生成正确，当我打开url /mercedes/sedan/page/1。

如果我打开/mercedes/sedan我所有的路由器链接也是/mercedes/sedan。

如何解决？

Answer 1

我找到了解决方案。我认为这不是优雅，但工程...我检查url包含0123st字符串，然后我只是添加params（如果是）或我将其添加到路由器路径。

<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>