vue2[初级] 路由组件传参

最新推荐文章于 2024-01-23 23:22:47 发布

ejokovic

最新推荐文章于 2024-01-23 23:22:47 发布

阅读量690

点赞数

分类专栏： VUE WebStorm2022 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u011664286/article/details/127031867

版权

路由组件传递参数

路由组件传递参数分为两种 param 和 query

param传参

– 传参步骤

1. 创建一级菜单组件Student.vue
1. 创建二级菜单(子菜单)组件StudentInfo.vue
1. 路由中配置一级菜单及子菜单
1. 父组件App.vue中添加Student组件的连接
1. 一级菜单Student.vue中模拟数据并展示数据列表
1. 一级菜单中配置params传参
1. 二级菜单(StudentInfo)中通过this.$route.params.id 方式获取一级菜单中配置的参数id
1. 一级菜单中通过watch实时监听id变化有变化则从之前的集合中根据id获取值然后绑定到属性stu上传递给二级菜单
  – 获取值的方式有很多，这里顺便练习了下父子组件传递属性值
[扩展]二级菜单中可通过watch来实时监听id的变化有变化则调用byId接口获取数据并在当前页面展示

源码

一级菜单Student.vue

<template>
<div>
  <pre style="font-size: 22px">
    params 传递参数 使用${stu.id} 然后需要在路由配置 path:'stuInfo/:id'
    在子组件中通过this.$route.params.id获取
    子组件中使用watch来监听这个id的变化，不能使用computed
    注意 这里的params.id 的id 要与路由中配置的一致 否则取不到值
  </pre>
  <ul>
    <li v-for="(stu,index) in stuList" :key="stu.id">
      <router-link :to="`/studentList/studentInfo/${stu.id}`">{
  {stu.id}}   {
  {stu.name}}</router-link>
    </li>
  </ul>
  <hr>
  <router-view></router-view>

  <StudentInfo :stu="stu"/>

</div>
</template>

<script>
 // import