Vue.js 和帶有路由器的 OMDb 頁面

Question

我正在嘗試使用 bootstrap-vue 分頁導航，這樣當我更改頁面按鈕上的頁面時，該更改將根據請求的頁面傳遞到 ajax 調用中。

我的路由器：

export default new Router({
  routes: [
    {
      path: '/route/:moviename/',
      name: 'myComponent',
      props: true,
      component: myComponent
    }
  ]
})

還有我的 Vue 組件：

// This is my nav-bar

<template>
     <div>
        <b-pagination-nav
          :link-gen='linkGen'
          :number-of-pages='pages'
          use-router
        ></b-pagination-nav>
    </div>
</template>

<script>
export default {
  props: ['moviename'],
  data () {
    return {
      res: '',
      pages: 1,
    }
  },
  methods: {
    myFunction (value) {
      // added &page=1 to the url to illustrate where it should be
      fetch('https://www.omdbapi.com/?s=' + value + ' &page=1 &apikey')
        .then(res => {
          return res.json()
        })
        .then(res => {
            this.res = res
            this.pages = Math.ceil(res.totalResults / 10)
          }
        })
    },
    // adds new path to router (route/moviename?page=pageNum)
    linkGen (pageNum) {
      return pageNum === 1 ? '?' : `?page=${pageNum}`
    }
  },
  mounted () {
    this.myFunction(this.moviename)
  },
  watch: {
    moviename (value) {
      this.myFunction(value)
    }
  }
}
</script>

當linkGen將新的url放入路由器時，如何修改我的代碼， /route/moviename?page=2 等將計入 ajax 調用？ 我嘗試了不同的方法，但將代碼恢復到了我的起點。 我的邏輯是應該修改觀察者來監聽頁面變化，但我是 Vue 的新手。 :(

編輯：這是我解決問題的方法

linkGen (pageNum) {
      return pageNum === 1 ? `/route/${this.$store.state.title}` : `/route/${this.$store.state.title}&page=${pageNum}`
    }

Answer 1

myComponent應該檢查當前$route查詢 object 中的頁碼：

<!-- myComponent template -->
<template>
  <div>
    <p>Movie: {{ $route.params.moviename }}</p>
    <p>Page Number: {{ pageNum }}</p>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
export default {
  name: 'myComponent',
  data() {
    // Response from AJAX query stored here
    result: ''
  },
  computed: {
    pageNum() {
      // Fallback to page 1 if no page query parameter in the current route
      return this.$route.query.page || '1'
    }
  },
  watch: {
    pageNum: {
      // Use an immediate watcher so that AJAX request made on created
      immediate: true,
      handler(newPage, oldPage) {
        // perform AJAX query here
        // Just some example code you would need to modify
        // based on you API calls and needs
        this.$axios.get('/some/url/here/' this.$route.params.moviename + '/' + newPage)
          .then(response => {
             this.result = response.data
          })
          .catch(() => {
            this.result = 'Error'
          })
      }
    }
  }
}
</script>

Answer 2

好吧，linkGen function 將?page=2（取決於 pageNum）添加到我的 url 的末尾，例如 /route/titanic?page=2

正確的方法是 /route/titanic&page=2 並且頁面路由有效

有沒有辦法“？” 可以在linkGen function中用“&”替換嗎？ 當我手動切換“？” 到“&”，它將 /route/titanic?page=2 替換為 /route/&page=2