vue Router路由组件传参

我们点击路由的时候，经常需要传递参数，路由组件传参分为param和query传参两种方式；

我们分别来学习下；

首先我开发了两个服务接口（源码的话，视频教程都配套有，导入idea即可）；

http://localhost:81/student/list  获取所有学生信息接口

返回：

{"ret":1,"studentList":[{"id":1,"name":"张三","age":20,"grade":"一年级"},{"id":2,"name":"李四","age":25,"grade":"二年级"},{"id":3,"name":"王五","age":21,"grade":"三年级"}]}

http://localhost:81/student/findById?id=1  获取指定Id的学生信息

返回：

{"ret":1,"student":{"id":1,"name":"张三","age":20,"grade":"一年级"}}

我们再搞个 学生信息菜单，点击显示所有学生信息，然后在点击学生，显示当前学生的相信信息；

这时候，就需要路由传参了，我们点击路由的时候，需要带一个id过去；

先把 学生信息组件Menu2.vue搞下：

<template>
    <div>
      学生信息列表
      <ul>
        <li v-for="(student,index) in students" :key="student.id">
          <router-link :to="`/menu2/subMenu3/${student.id}`">{{student.name}}</router-link>
        </li>
      </ul>
      <hr/>
      <router-view></router-view>
    </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'SubMenu3',
    data(){
      return{
        students:[]
      }
    },
    mounted () {
      let url='http://localhost:81/student/list'
      axios.get(url).then(response=>{
        console.log(response.data)
        let data=response.data;
        if(data.ret==1){
          this.students=data.studentList;
        }
      }).catch(error=>{
        console.log(error)
      })
    }
  }
</script>

<style scoped>

</style>

我们再网页加载的时候mounted勾子里 ajax获取数据，然后v-for遍历，直接路劲上带上id参数

router/index.js里配置下路由：

{

      path:'/menu2',

      component:Menu2,

      children:[

        {

          path:'subMenu3/:id',

          component:SubMenu3

        }

      ]

    },

在path里，我们:id 获取路由参数；

在新建一个嵌套路由SubMenu3.vue

<template>

    <div>

      Id:{{$route.params.id}}<br/>

      {{student.name}}<br/>

      {{student.age}}<br/>

      {{student.grade}}<br/>

    </div>

</template>

<script>

  import axios from 'axios'

  export default {

    name: 'SubMenu3',

    data(){

      return{

        student:{}

      }

    },

    mounted () {

      let id=this.$route.params.id

      let url= `http://localhost:81/student/findById?id=${id}`

      axios.get(url).then(response=>{

        console.log(response.data)

        let data=response.data;

        if(data.ret==1){

          this.student=data.student

        }

      }).catch(error=>{

        console.log(error)

      })

    },

    watch:{

      $route(value){

        let id=value.params.id

        let url= `http://localhost:81/student/findById?id=${id}`

        axios.get(url).then(response=>{

          console.log(response.data)

          let data=response.data;

          if(data.ret==1){

            this.student=data.student

          }

        }).catch(error=>{

          console.log(error)

        })

      }

    }

  }

</script>

<style scoped>

</style>

我们通过$route.params.id可以获取到params方式的路由参数；

得到id后，我们ajax请求，得到学生信息的详细数据；

不过mounted只能执行一次；我们切换的时候，需要通过watch检测$route变化，再来请求；

前面这种是常见的param传参，还有一种是?后面带参数的query方式  ?id=1 类似这样；

我们改写下前面代码：

Menu2.vue改下：

router/index.js 把参数去掉：

SubMenu3.vue里的$route.params全部改成$route.query；

运行效果一样；