vue-router 2.0 跳转之传参、传递多个参数

最新推荐文章于 2025-05-24 16:02:32 发布

Awen_liang1002

最新推荐文章于 2025-05-24 16:02:32 发布

阅读量9.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： VUE vue-router

本文链接：https://blog.youkuaiyun.com/weixin_37615202/article/details/83008755

VUE 同时被 2 个专栏收录

6 篇文章

订阅专栏

vue-router

3 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何通过路由链接(router-link)在文章列表中传递单个及多个参数至目标页面，并展示了如何在目标组件的created()钩子中接收这些参数，实现数据的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中，往往会遇到这样的情况，就是要实现在一文章列表中，点击其中一条跳转到下个页面，然后将这一条的相关数据带到下个页面中显示，无论点哪一条都是跳到相同的页面结构（下一个页面的页面使用的组件是一样的），只是填的数据不一样，这个时候就需要实现跳转的时候一起把参数携带过去。

<template>
  <div class="template">
    <!--点击文章列表跳转到相应的文章页面-->
    <ul>
      <li v-for="(article_task,index) in tasks">
      <!--使用v-bind动态绑定id传递给目标路径-->
      <!--注意： 这里携带了了article_task的一个参数id-->
        <router-link tag="a" :to="{path:'/articleTask',query{id:article_task.id}}">
          <div class="article-render">
            <span>{{index+1}}.</span>
            <span>{{article_task.title}}</span>
            <span>
              {{article_task.content}}%
            </span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

但是：上面的的router-link传递一个一个参数id，当我们需要传递多个参数的时候应该怎么办呢，很简单，只需要将query的参数用逗号隔开就好了

<router-link tag="a" 
    :to="{
        path:'/articleTask',
        query{id:article_task.id,title:article_task.title,content:article_task.content}}">
</router-link>

但是问题，又来了。。。。。代码这样写贼鸡儿多，万一写错一个那我岂不是文章不现实了，所以还有一个更简单的办法

<router-link tag="a" :to="{path:'/articleTask',query{arry:article_task}}"></router-link>

传递参数可以，怎么接收参数呢？在目标组件里接收参数，只需要在created()钩子中接收即可，实现如下：

<script>
  export default {
    data() {
      return {
      }
    },
    created() {

    //获取参数的时候  是 this.$route ! route !！  route ！！！

    //单个参数传递的时候
      this.id = this.$route.query.id;//获取上个页面传递的id,在下面获取数据的时候先提交id

    //这边接收上个组件传递过来的arry数组，赋值给data中定义的articleTask
      this.articleTask = this.$route.query.arry;
    },
  }
</script>