Vue JS路由器查询传递并绑定到axios

时间:2018-03-12 05:54:29

标签: vue.js vuejs2 axios vue-router

我的用例是这样的。

  1. 用户来 questionPapersTable.vue 并选择纸质名称并点击开始考试按钮
  2. enter image description here

    1. 然后用户从那里路由到 startExam.vue组件我希望将该id参数值作为参数传递给axios,并希望在此 StartExam中显示该id参数.vue 组件。 我试过
    2.   

      ID来自:{{$ route.query.id}}

      但这不会显示任何内容,甚至不会在控制台中显示错误。 我怎么做到这一点。这是我的代码。

      questionPapersTable.vue

      <template lang="html">
        <div class="">
          <h1>Hello</h1>
          <table>
            <tr>
              <th>Paper Name</th>
              <th></th>
            </tr>
      
            <tr v-for="n in 10">
              <td>Demo</td>
              <th><button @click="goStart(12)">Start exam</button></th>
            </tr>
          </table>
        </div>
      
      </template>
      
      <script>
      export default {
        methods:{
          goStart(paperId){
            console.log("GO TO START EXAM!");
            this.$router.push({
              path:'/startExam',
              params:{
                id:paperId
              }
      
          });
          }
        }
      }
      </script>
      

      startExam.vue

      <template lang="html">
        <div class="">
        <h1>Start Exam</h1>
        ID comes is : {{$route.query.id}}
        </div>
      </template>
      
      <script>
      import axios from 'axios'
      export default {
        created(){
          axios.get('http://localhost/laravel_back/public/api/papers/' +id)
        }
      }
      </script>
      
      <style lang="css">
      </style>
      

1 个答案:

答案 0 :(得分:3)

如果提供了路径,则忽略

参数:

router.push({ name: 'startExamName', params: { docId }}) // -> /startExam/123
router.push({ path: `/startExam/${docId}` }) // -> /startExam/123

// This will NOT work
router.push({ path: '/startExam', params: { docId }}) // -> /startExam

如果你想访问id,可以在javascript代码中

this.$route.params.id

https://router.vuejs.org/en/essentials/navigation.html