VUE路由器和分页链接
问题描述:
我对搜索结果简单分页:VUE路由器和分页链接
<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
。
如何解决?
答
我找到了解决方案。我认为这不是优雅,但工程...我检查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>