26.Vue Router路由组件传参

最新推荐文章于 2023-01-21 00:50:59 发布

九宫格输入法

最新推荐文章于 2023-01-21 00:50:59 发布

阅读量123

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Stubborn_bull/article/details/118807029

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

我们分别来学习下；

首先我开发了两个服务接口：

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>
    学生信息列表
  </div>
</template>

<script>
    export default {
        name: "Menu2"
    }
</script>

<style scoped>

</style>

router/index.js修改下，增加Menu2的路由跳转

/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'
import SubMenu1 from '../pages/SubMenu1'
import SubMenu2 from '../pages/SubMenu2'
import Menu2 from '../pages/Menu2'
Vue.use(VueRouter)
export default new VueRouter({
  // 多个路由
  routes:[
    {
      path:'/index',
      component:Index
    },
    {
      path:'/menu1',
      component:Menu1,
      children:[
        {
          path:'/menu1/subMenu1',
          component:SubMenu1
        },
        {
          path:'subMenu2',  // 简化写法 类似 /menu1/subMenu2
          component:SubMenu2
        },
        {
          path:'',
          redirect: '/menu1/subMenu1'
        }
      ]
    },
    {
      path:'/Menu2',
      component:Menu2
    },
    {
      //默认访问
      path:'/',
      redirect:'/index'
    }
  ]
})

App.vue中也修改，增加学生信息菜单

<template>
  <div>
    <div class="menu">
      <ul>
        <li>
          <!--<a href="">首页</a>-->
          <router-link to="/index">首页</router-link>
        </li>
        <li>
          <!--<a href="">菜单1</a>-->
          <router-link to="/menu1">菜单1</router-link>
        </li>
        <li>
          <!--<a href="">学生信息</a>-->
          <router-link to="/menu2">学生信息</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <keep-alive>
      <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style scoped>

  ul li{
    float:left;
    padding-left: 20px;
    list-style-type: none;
  }

  ul li a{
    text-decoration: none;
  }

  .content{
    clear: both;
    padding: 20px;
  }
</style>

在这里插入图片描述
我们在网页加载的时候mounted勾子里 ajax获取数据，然后v-for遍历，直接路径上带上id参数

<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: "Menu2",
        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>

在这里插入图片描述
router/index.js里配置下路由，路由中携带参数id：

/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'
import SubMenu1 from '../pages/SubMenu1'
import SubMenu2 from '../pages/SubMenu2'
import Menu2 from '../pages/Menu2'
import SubMenu3 from '../pages/SubMenu3'
Vue.use(VueRouter)
export default new VueRouter({
  // 多个路由
  routes:[
    {
      path:'/index',
      component:Index
    },
    {
      path:'/menu1',
      component:Menu1,
      children:[
        {
          path:'/menu1/subMenu1',
          component:SubMenu1
        },
        {
          path:'subMenu2',  // 简化写法 类似 /menu1/subMenu2
          component:SubMenu2
        },
        {
          path:'',
          redirect: '/menu1/subMenu1'
        }
      ]
    },
    {
      path:'/Menu2',
      component:Menu2,
      children: [
        {
          path:'subMenu3/:id',
          component:SubMenu3
        }
      ]
    },
    {
      //默认访问
      path:'/',
      redirect:'/index'
    }
  ]
})

新建一个嵌套路由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>

我们通过 $r o u t e . p a r a m s . i d 可以获取到 p a r a m s 方式的路由参数；得到 i d 后，我们 a j a x 请求，得到学生信息的详细数据；不过 m o u n t e d 只能执行一次；我们切换的时候，需要通过 w a t c h 检测$ route变化，再来请求；

在这里插入图片描述
前面这种是常见的param传参，还有一种是?后面带参数的query方式 ?id=1 类似这样；

我们改写下Menu2.vue代码：

<router-link :to="`/menu2/subMenu3/${student.id}`">{{student.name}}</router-link>
改为：
<router-link :to="`/menu2/subMenu3?id=${student.id}`">{{student.name}}</router-link>

同时去掉路由中的id参数：

{
  path:'/Menu2',
  component:Menu2,
  children: [
    {
      path:'subMenu3',
      component:SubMenu3
    }
  ]
}

SubMenu3.vue里的 $r o u t e . p a r a m s 全部改成$ route.query；

<template>
  <div>
    Id:{{$route.query.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.query.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.query.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>

在这里插入图片描述

九宫格输入法

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
26.Vue Router路由组件传参

我们点击路由的时候，经常需要传递参数，路由组件传参分为param和query传参两种方式；我们分别来学习下；首先我开发了两个服务接口： http://localhost:81/student/list 获取所有学生信息接口返回：{"ret":1,"studentList":[{"id":1,"name":"张三","age":20,"grade":"一年级"},{"id":2,"name":"李四","age":25,"grade":"二年级"},{"id":3,"name":
复制链接

扫一扫