详解如何使用router-link对象方式传递参数？

<template>
 <div>
  <div class="header">
    头部 - 导航栏目
    <p>
      <router-link :to="{name:'detail'}">细节列表1</router-link>
      <router-link :to="{name:'list'}">英雄列表1</router-link>
    </p>
  </div>
  <!--留坑，非常重要-->
    <router-view class="main"></router-view>
    <div class="footer">底部 - 版权信息</div>
 </div>
</template>
<script>
  export default {
   data(){
    return{
    }
   },
   methods:{
   }
  }
</script>
<style scoped>
  .header,.main,.footer{text-align: center;padding: 10px;}
  .header{height:70px;background: yellowgreen;}
  .main{height:300px;background: skyblue;}
  .footer{height: 100px;background: hotpink;}
</style>

3. list.vue文件

<template>
  <div>
    我是list列表
    <!-- :key是绑定器 -->
    <!-- query是查询字符串，加查询参数 ，相当于查询规则；对比参考main.js关于路由配置path属性-->
    <ul>
      <li v-for="(hero,index) in heros" :key="index">
        {{hero.name}}
        <router-link :to="{name:'detail',query:{id:index}}">查看详情</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        heros:[{
          name:'李白'
        },{
          name:'杜甫'
        },{
          name:'屈原'
        },{
          name:'白居易'
        },{
          name:'李清照'
        },{
          name:'欧阳修'
        }]      }
    }
  }
</script>
<style scoped>
  ul,li{list-style: none;}
</style>

4. detail.vue文件：（可以在控制台查看打印结果）

<template>
  <div>
    我是详情
  </div>
</template>
<script>
  export default{
    data(){
      return{
      }
    },//DOM尚未生成
    create(){
      //获取路由参数
      //vue-router中挂载两个对象的属性
      //$route(信息数据)
      //$router(功能函数)
      /*console.log(this.$route.params);*/
      console.log(this.$route.query);
    },//已经将数据装载到页面上去了，DOM已经生成
    mounted(){
    }
  }
</script>
<style>
</style>

这就是本文的内容。

以上所述是小编给大家介绍的如何使用router-link对象方式传递参数详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！