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

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

所以我想为第1页的结果提供网址：/mercedes/sedan或仅/mercedes，为其他网页提供/mercedes/sedan/page/x或/mercedes/page/x。

此时，当我打开网址/mercedes/sedan/page/1时，我的链接才能正常生成并正常生成。

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

如何解决？

Answer 1

我找到了解决方案。我认为它不优雅，但有效...我检查url包含/page/字符串，然后我只添加params（如果为true）或者我将其添加到路由器路径。

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

vue-router和分页链接

1 个答案: