带有路由器的 Vue.js 和 OMDb 页面

Posted 2023-02-22

【中文标题】带有路由器的 Vue.js 和 OMDb 页面

【英文标题】：Vue.js and OMDb pages with router

【发布时间】：2020-03-04 10:18:41

【问题描述】：

我正在尝试使用 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`
    

【参考方案1】：

myComponent 应该检查当前$route 查询对象中的页码：

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

【讨论】：

非常感谢您对我的帮助。我会抓住这个，看看我能用它做什么！

这假设您在 ? 之后传递查询参数 (page)

点赞！如果您需要在 vuex 中更新“页面”，这是如何工作的