为 vue.js 分页的不同页面制作单独的 url答案

【问题标题】：Making separate urls for different pages of vue.js pagination为 vue.js 分页的不同页面制作单独的 url
【发布时间】：2020-01-09 09:52:49
【问题描述】：

我使用 vue.js 为我网站上的画廊进行了分页。但是，每当我访问不同的页面时，URL 都不会改变，当我刷新页面时，它会返回到第 1 页。相反，我想这样做，例如，当您在第 3 页时，当您复制和粘贴时URL，您将进入第 3 页。

这是我的画廊外观的jsfiddle。

我想做的是将“?page={pageNum}”添加到 URL 的末尾，每当我在特定页面上并且当我输入该链接时，我都会登陆页面 {pageNum}。

我找到了here 的指南。我想实施网站上建议的第一种方法。问题是提供的代码看起来不完整，我不明白我应该怎么做才能让它工作。

除了在 v-pagination 标记中添加 :link-gen="linkGen" 和 use-router 之外，我已经尝试添加整个脚本标记并仅在新 Vue 中添加方法，但这并没有产生预期的结果。

我想寻求帮助以实现提供的 jsfiddle 的功能。

这是我上面链接的 jsfiddle 中的代码：

<div id="app" class="container text-center">
  <h1>
    Gallery
  </h1>
  <div v-show="currentPage == 1">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
  </div>
    <div v-show="currentPage == 2">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
  </div>
    <div v-show="currentPage == 3">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
   <img class="w-25" src="https://images.unsplash.com/photo-1499002238440-d264edd596ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80">
  </div>
  <div class="d-flex justify-content-center mt-3">
    <v-pagination
      v-model="currentPage"
      :page-count="totalPageCount"
      :classes="bootstrapPaginationClasses"
    ></v-pagination>
  </div>
</div>

<script src="js/lightbox-plus-jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination@0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
    new Vue({
      components: {
        vPagination: window['vue-plain-pagination'] },

      data: {
        currentPage: 1,
        totalPageCount: 3,
        bootstrapPaginationClasses: {
          ul: 'pagination',
          li: 'page-item',
          liActive: 'active',
          liDisable: 'disabled',
          button: 'page-link' },

        customLabels: {
          first: false,
          prev: 'Previous',
          next: 'Next',
          last: false } } }).


    $mount('#app');
</script>

撞。仍然无法将该功能添加到我的网站。

【问题讨论】：

标签： javascript html vue.js pagination

【解决方案1】：

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes 是要走的路。

设置 vue 路由器
创建动态路由
为 $route 设置 vue watcher，以便通过 url 转到正确的页面（从 url 中提取页码并在您的组件中进行相应设置）

【讨论】：