java1234开源博客系统
博客信息

vue Router路由组件传参

0
发布时间:『 2019-08-01 21:38』  博客类别:Vue.js  阅读(181)

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":"一年级"}}


GIF.gif

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

这时候,就需要路由传参了,我们点击路由的时候,需要带一个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改下:

1.jpg


router/index.js 把参数去掉:

QQ截图20190801212836.jpg


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


QQ截图20190801212907.jpg


运行效果一样;


关键字:   无
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有