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

【问题标题】：Vue JS router query passing and bind to the axiosVue JS 路由器查询传递并绑定到 axios
【发布时间】：2018-03-12 05:54:28
【问题描述】：

我的用例是这样的。

用户来到 questionPapersTable.vue 并选择论文名称并点击开始考试按钮

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

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>

【问题讨论】：

标签： vue.js vuejs2 axios vue-router

【解决方案1】：

如果提供了路径，则忽略参数：

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

【讨论】：

我修复了它，但我没有得到输出到 ID 来自：{{$route.query.id}}
您的网址现在的结构如何？如果你使用参数，它必须是{{$route.params.id}}
现在它来了。 =) 我犯了一个愚蠢的错误，我把 {{$route.params.id}} 而不是 {{$route.query.id}}。但我仍然不能在 created() 钩子中调用它。我在创建的生命周期钩子内绑定了控制台日志 console.log("Inside created",$route.params.id);但它说 $route 没有定义
你应该使用this.$route.params.id。
非常感谢。有用！我非常感谢您的支持。 =)