vue-router 和分页链接答案

【问题标题】：vue-router and pagination linksvue-router 和分页链接
【发布时间】：2017-07-18 05:37:38
【问题描述】：

我对搜索结果进行了简单的分页：

<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-router 集成。这是我的路由器实例：

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。

如何解决？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我找到了解决方案。我认为这并不优雅，但可以工作...我检查 url 包含/page/ 字符串，然后我只需添加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>

【讨论】：